微信订阅号：rabbit_svip
1、常见误区
element.style.width
通过 element.style.width 这个方法，获取到的是在html元素中内联的宽度。
比如：
<div id="div1" style="width: 100px;"></div>
如果是上面这种写法，用 div1.style.width 这种方法就可以获取div1的宽度。
但是如果div1的样式都是在<style>里写的，或者是连了别的css文件，用 element.style.xxx 这种写法就获取不到元素对应的样式属性了。
clientWidth
用 clientWidth 可以获得赋在元素上的样式属性。
比如：
HTML代码
<div id="div1"></div>
CSS代码
#div1 {
width: 100px;
margin: 10px;
padding: 20px;
border: 30px solid #ccc;
}
JS代码
console.log(div1.clientWidth);
// 最后输出：140
因为 clientWidth 会把元素的 width 和 padding 都算上。
因为元素左右都有 padding 值，所以是 20 + 100 + 20 = 140。
offsetWidth
HTML代码
<div id="div1"></div>
CSS代码
#div1 {
width: 100px;
margin: 10px;
padding: 20px;
border: 30px solid #ccc;
}
JS代码
console.log(div1.offsetWidth);
// 输出：200
因为 offsetWidth 会把元素的 width、padding 和 border 都加在一起。
因为元素左右都有 padding 和 border，
所以是：20 + 30 + 100 + 30 + 20 = 200
currentStyle 和 getComputedStyle
用 currentStyle 和 getComputedStyle 可以只获取元素的指定样式。
但老IE不兼容 getComputedStyle，而chrome和Firefox又不兼容 currentStyle 。
所以可以封装成下面这种样子
JS代码
function getStyle(obj,styleName) {
if(obj.currentStyle) {
return obj.currentStyle[styleName];
} else {
return getComputedStyle(obj, false)[styleName];
}
}
调用：
HTML代码
<div id="div1"></div>
CSS代码
#div1 {
width: 100px;
margin: 10px;
padding: 20px;
border: 30px solid #ccc;
}
JS代码
function getStyle(obj,styleName) {
if(obj.currentStyle) {
return obj.currentStyle[styleName];
} else {
return getComputedStyle(obj, false)[styleName];
}
}
console.log(getStyle( div1, 'width' ));
console.log(getStyle( div1, 'borderColor' ));
// 输出：100px
// 输出：rgb(204, 204, 204)
注意：
- 调用的时候，样式属性名要用引号括住。
- 如果调用像 border-color 这里值的时候，要把 “-” 去掉，第二个单词首字母大写（驼峰式写法）。
- 输出的值是带单位的。
