js操作css问题

  this.style.backgroundColor="#f00″;   // 设置调试背景  
    this.style.zIndex=1; // 设置z轴优先
    }
（22行）开始报错，函数要实现一个放大的图片的效果，
要怎么才能运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>body{ margin:0; padding:0}
    div{background:#CCCCCC; position:absolute}
    #first{width:100px; height:150px}
    #second{top:160px;width:100px;height:150px}
    #third{ width:200px; height:310px; left:110px}
    </style>
    <script type="text/javascript">
    function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
    var obj=document.getElementById(id); // 获取元素对象值
    var dW=obj.clientWidth; // 获取元素宽度
    var dH=obj.clientHeight; // 获取元素高度
    //var oTop=obj.offsetTop;
    //var oLeft=obj.offsetLeft;
    obj.onmouseover=function(){ // 鼠标移入
    this.style.width=dW*x+"px"; // 横向缩放
    this.style.height=dH*y+"px"; // 纵向缩放
    this.style.backgroundColor="#f00″;   // 设置调试背景
    this.style.zIndex=1; // 设置z轴优先
    }
    obj.onmouseout=function(){ // 鼠标移出，设回默认值
    this.style.width="";
    this.style.height="";
    this.style.padding="";
    this.style.backgroundColor="";
    this.style.zIndex="";
    }
    }
    zoom("first",1.25,1.25);
    zoom("second",1.25,1.25);
    zoom("third",1.25,1.25);
    </script>
</head><body>  
    <div id="first"></div>   
    <div id="second"></div>   
    <div id="third"></div>  
</body>
</html>