获取非行间样式getComputedStyle

转载

mb5fdb0fbba4f73 2017-03-11 01:25:00

有如下代码：

1 2 3	`div {``width``:` `200px``;``}`

1 2 3	`<``div``id="aa" style="height: 100px;">``xxxx``</``div``>`

1 2 3 4 5 6 7 8 9	`var``div = document.getElementById(``"aa"``);``var``h = div.style.height;``var``w = div.style.width;``console.log(h);` `//100px``console.log(w);` `//这个结果为空`

因为这种方法只能获取dom元素的行内样式，当这个div的宽度是在css中设置的，用这种方法得到的就是空值。

有两种方法可以解决这个问题。

1.window.getComputedStyle(obj,false)['attr']方法

这是BOM（浏览器window对象）提供的方法，所以可以直接写成getComputedStyle(nodeObj,false)，省略前面的window对象,该方法有两个参数，第一个是要获取样式的节点对象；第二个可以写成任何的字符一般写成false或者null，这里最好是用false因为用null IE9+会有问题；后面直接跟要获取的样式（写在方括号中）即可。这个方法的返回值为一个对象，为计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 var style=getComputedStyle(div,false)['width']; alert(style);

1 2 3 4 5	`var``div = document.getElementById(``"aa"``);``var``w = getComputedStyle(div,``false``)[``"width"``]``console.log(w);` `//200px`

但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法

2.nodeObj.currentStyle['attr'];

node.currentStyle，该属性返回的也是是一个对象，也是计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成

var style=div.currentStyle['width']; alert(style);

1 2 3 4 5	`var``div = document.getElementById(``"aa"``);``var``w = div.currentStyle[``"width"``];``console.log(w);` `//200px`

这个方法在谷歌浏览器报错，但是在ie浏览器可以打印出结果；

综上所述，我们可以写一个方法来获取非行间样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`var``div = document.getElementById(``"aa"``);``var``w = getAttr(div,` `"width"``);``console.log(w);``function``getAttr(obj, attr) {``var``style;``if``(window.getComputedStyle) {``style = getComputedStyle(obj,` `false``)[attr];` `//主流浏览器``}` `else``{``style = obj.currentStyle[attr];` `//兼容IE``}``return``style;``}`