盒模型宽高的获取和设置

今天在做一个小项目时遇到的两个需注意的知识点：

1、getElementsByTagName和getElementsByClassName获得的是一个数组，取样式时应注意应取样式所在元素所在的index值。

2、ele.style.width只能获取内嵌样式的宽高，而非内嵌样式的宽高如何获取呢？

1)、window.getComputedStyle(dom)和getPropertyValue配合使用。
缺点，只能获取，不能设置。
使用方法：

a、

window.getComputedStyle(element[,pseudoElt]）

返回结果为包含该节点最终样式信息的对象，即各种css规则。
第一个parameter表示要获取计算其风格的Element，第二个parameter表示要匹配的为元素的字符串。可省略或用null。

b、

styleobj.getPropertyValue(style)

返回指定声明的值

举例：

window.getComputedStyle(bloodLine).getPropertyValue('width');
window.getComputedStyle(bloodLine)['width'];//也可以哦

注意：document.getAttribute('style')只能获取行间样式的值哦！

 

2)、使用element.offsetHeight和element.offsetHeight

//水平的高度
Element.offsetHeight
//垂直高度
Element.offsetWidth

！注意，求得的值包括padding和border

 

3)、使用element.clientHeight和element.clientHeight

//水平的高度
Element.clientHeight
//垂直高度
Element.clientWidth

！注意，求得的值包括padding