day-12.1 获取元素的最终样式(.clientWidth()，.offsetWidth()，scrollWidth())；

元素样式代码； 

通过

1、clientWidth

2、offsetWidth

3、scrollWidth

获取元素的最终样式；

 1 <body>
 2         <div id="wrap"></div>
 3         <script>
 4             var oWrap = document.getElementById("wrap");
 5             //var w = oWrap.clientWidth; // width + padding;
 6             //var w = oWrap.offsetWidth;  //width + padding + border
 7             var w = oWrap.scrollWidth; // width+padding + 内容超出部分的宽度(如果没有超出，该API和clientWidth一样)；
 8             console.log(w);
 9         </script>
10 </body>

 offsetTop和offsetLeft 获取元素的相对于定位参考的父级元素的定位值获取；

 1     <script>
 2         /*    clientWidth    //获取元素的content宽/高 + padding的宽/高
 3               clientHeight
 4 
 5          *    offsetWidth    //获得取元素的content宽/高 + padding的宽/高 + border的大小
 6          *    offsetHeight
 7          *    offsetTop    获取元素离定位父级的顶部距离
 8          *    offsetLeft
 9          *
10          *    scorllWidth
11          *    scorllHeight
12          *
13         */
14         var oBox = document.getElementById("box");
15         //console.log(oBox.clientWidth );
16        // console.log(document.body.clientHeight );//获取页面的实际宽/高
17        // console.log(document.documentElement.clientWidth );//获得文档的可视区域的宽/高,不包括滚动条
18         //没有兼容性问题，但是在IE8及以下的时候会有几px的误差值
19         //console.log(oBox.offsetTop)
20         function getOfffset(dom) {
21             var obj = {
22                 left : 0,
23                 top : 0
24             };
25             while (dom !== document.body){
26                 obj.top += dom.offsetTop;
27                 obj.left += dom.offsetLeft;
28                 dom = dom.offsetParent;
29             }
30             return obj;
31         }
32         console.log( getOfffset( oBox.children[0].children[0] ).left );
33         /*
34         *   p
35         *   obj.top = 30;
36         *   dom = div
37         *
38         *   div
39         *   obj.top
40         */
41     </script>

 

Html文档的每个元素的样式都存在compute这个对象内；可以通过getCompute()这个API去获取；

 1 <body>
 2         <div id="wrap"></div>
 3         
 4         <script>
 5             var oWrap = document.getElementById("wrap"),
 6                 oWrapStyle =getComputedStyle(oWrap);
 7             console.log(oWrapStyle.width); //获取width值；
 8                 oWrapStyle.width = "400px"; //报错，red-only，由于是引用数据类型，所以修改可能会修改到元素的样式；所以这个对象的值被设定成只能读取，而不能改写的；
 9             console.log(oWrapStyle.background-color); //获取color值；
10         </script>
11 </body>

 

posted @ 2018-06-19 21:26  bibiguo  阅读(220)  评论(0)    收藏  举报