left，offsetLeft，width，offsetWidth，scrollWidth小结

最新推荐文章于 2024-10-16 16:26:58 发布

weixin_34313182

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量71

点赞数

文章标签： xhtml javascript ViewUI

定义和用法
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 = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:" + css(mdiv, "left")
34 + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offsetLeft:" + mdiv.offsetLeft
35 + "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:" + css(mdiv, "width")
36 + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offsetWidth:" + mdiv.offsetWidth
37 + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>