JS如何获取盒模型的宽和高

1）、node.style.width/height

这种方式只能取到dom元素内嵌样式的宽和高，通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽和高的，即只有这种：

<p style="width:100px;height:50px">test</p>

但用这种方式可以设置node的宽与高，举个例子：

document.getElementById("test").style.width ="200px";

1、只能操作行内样式；

2、只包括内容区，不包括border和padding部分；

3、返回值带单位，返回值的数据类型是string。

 

2）、node.currentStyle.width/height

这种方式是获取渲染后的结果，但只在旧版本的IE浏览器中支持，该特性是非标准的，尽量不要在生产环境中使用它。

内嵌、内联、外联样式均支付；返回值带单位，返回值的数据类型是string；可惜只有IE支持。

 

3）、window.getComputedStyle(node).width/height

window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。和上一种方式是相似的，但通用性更好。

返回值带单位，返回值的数据类型是string。

 

4）、node.getBoundingClientRect().width/height

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。包含边框(border)、内边距(padding)以及CSS设置的宽度(width)值。

1、包括内容区，border和padding部分的总长度；

2、返回值不带单位，返回值的数据类型是number。

详情可点击链接查看： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

 

5）、node.offsetWidth/offsetHeight

这种方式是测量包含元素的边框(border)、内边距(padding)、滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)和高度（height）的值。

1、包括内容区，border和padding部分的总长度；

2、返回值不带单位，返回值的数据类型是number；

3、还有offsetHeight、offsetLeft、offsetTop 一共就这四个，没有其它的样式。

 

第四种与第五种的对比 ：
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于可视区窗口。 
getBoundingClientRect() 的值只相对于可视去窗口。

 

小结：第一种方法更多用于设置元素的宽高；第二种只适用于IE浏览器；第三种适用于只想获取内容content的宽高，后面两种适用于想获取IE模型（content+padding+border）的宽高。

 

转载于:https://www.cnblogs.com/shuangju/p/9984218.html