left,offsetLeft,width,offsetWidth,scrollWidth小结

爱六六 2011-12-29

css string class html

定义和用法
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>

FireFox和IE效果相同


Chrome略有不同(宽度不同)



登录 后评论
下一篇
冒顿单于
9424人浏览
2019-08-28
相关推荐
js获取网页各种宽高
341人浏览
2017-07-12 11:03:28
JavaScript DOM元素尺寸和位置
824人浏览
2015-07-20 16:09:00
dojo/dom-geometry元素大小
1450人浏览
2016-04-21 18:54:18
各种滚动条的获取
770人浏览
2016-05-10 15:24:59
offsetLeft,Left,clientLeft的区别
466人浏览
2012-04-27 10:04:00
元素尺寸的获取
484人浏览
2017-07-06 16:31:00
JavaScript中尺寸、坐标
584人浏览
2017-11-15 21:23:00
javascript中获取元素尺寸
264人浏览
2016-12-08 15:23:00
0
0
0
423