JS-学习-DOM元素尺寸和位置

Posted 强天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS-学习-DOM元素尺寸和位置相关的知识,希望对你有一定的参考价值。

一,获取元素的css大小

1.通过style内联获取元素的大小

  var box = document.getElementById(‘box‘);    // 获得元素;
     box.style.width;                             // 200px;
     box.style.height;                 

2.通过计算获取元素的大小

  var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
     style.width;   

3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;

   var sheet = document.styleSheets[0];            // 获取link或style;
     var rule = (sheet.cssRules || sheet.rules)[0];  // 获取第一条规则;
     rule.style.width;     
以上三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小;比如加上内边距/滚动条/边框之类的;
 
 

二 获取元素实际大小

 1.clientWidth和clientHeight

  可以获取元素可视区的大小,包含元素内容及内边距所占据的空间大小

返回了元素大小,但没有单位,默认单位是px;
     PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
     1.元素增加边框,无变化,200;
     2.元素增加外边框,无变化,200;
     3.增加滚动条,最终值=原本大小-滚动条大小;184;
     4.增加内边距,最终值=原本大小+内边距大小;220;
 PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;

2.scrollWidth和scrollHeight

 这组属性可以获取没有滚动条的情况下,元素内容的总高度;
    box.scrollWidth;
    // PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;

3.offsetWidth和offsetHeight

 这组属性可以返回元素实际大小,包含边框/内边距和滚动条;
    box.offsetWidth;                                 200
     PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
     PS:对于元素的实际大小,理解如下:
     1.增加边框,最终值=原本大小+边框大小;220;
     2.增加内边距,最终值=原本大小+内边距大小;220;
     3.增加外边据,无变化;
     4.增加滚动条,无变化,不会减小;

 PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;

 
 
三,动态加载脚本和样式
 
1 var flag = true;
2 
3 if (flag) {
4    var script = document.createElement(‘script‘);
5   script.type = "text/javascript/";        
6   script.text = "alert(‘test‘)";  
7   document.getElementByTagName("head")[0].appendChild(script);
  }

 

 
 
 
 
 
 
 






















以上是关于JS-学习-DOM元素尺寸和位置的主要内容,如果未能解决你的问题,请参考以下文章

高频Dom操作,页面性能优化(学习)

JavaScript获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小

十八DOM元素尺寸和位置

窗口属性 和DOM 元素尺寸位置 及习题加强