定义和用法
left属性规定元素的左边缘。该属性定义了定位元素左边距边界与其包含块左边界之间的偏移。
注释：如果“position”属性的值为“static”，那么设置“left”属性不会产生任何效果。
类型：string 状态：可读可写 js：elem.style.left
offsetLeft属性返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
类型：int 状态：只读 js：elem.offsetLeft
width属性规定元素的宽度
类型：string 状态：只读 js：elem.style.width
offsetWidth返回元素的宽度，以像素为单位。包括padding，border
类型：int 状态：只读 js：elem.offsetWidth
scrollWidth返回元素的完整的宽度，以像素为单位。包括padding，border，滚动条
类型：int 状态：只读 js：elem.scrollWidth
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>奎</title>
5 <style type="text/css">
6 *{ margin:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; padding-top:0px;}
7 .main{ background-color:Orange; width:500px; height:300px; left:300px; position:relative; overflow:hidden}
8 .mdiv{border:1px solid red; padding:10px; left:100px;top:30px; width:50px; height:50px; position:absolute; overflow:scroll }
9 .txt{ left:300px; position:relative; background-color:Orange; width:500px; }
10 </style>
11 <script type="text/javascript">
12 function css(obj, attr, value) {
13 switch (arguments.length) {
14 case 2:
15 if (typeof arguments[1] == "object") {
16 for (var i in attr) obj.style[i] = attr[i]
17 }
18 else {
19 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
20 }
21 break;
22 case 3:
23
24 obj.style[attr] = value;
25 break;
26 default:
27 return "";
28 }
29 }
30 window.onload = function () {
31 var mdiv = document.getElementById("mdiv");
32 var txt = document.getElementById("txt");
33 txt.innerHTML = " left:" + css(mdiv, "left")
34 + " offsetLeft:" + mdiv.offsetLeft
35 + "<br/> " + css(mdiv, "width")
36 + " offsetWidth:" + mdiv.offsetWidth
37 + " scrollWidth:" + mdiv.scrollWidth + "<br/><br/>";
38 }
39 </script>
40 </head>
41 <body>
42 <div class="main">
43 <div id="mdiv" class="mdiv">
44 </div>
45 </div>
46 <div id="txt" class="txt">
47 </div>
48 </body>
49 </html>
FireFox和IE效果相同
Chrome略有不同（宽度不同）
