在js中获取元素的样式属性大多都是用ele.style.attr这种方式,但是这种方式是有局限性的,该方法只能获取到行内样式,获取不了外部样式。
如果要想获取元素的外部样式,可以选用currentStyle属性和getComputedStyle属性,但这两个属性不能设置样式,只能获取样式,而且这两个属性有其兼容性,具体来说:
currentStyle属性
用法:ele.currentStyle["attr"]
或 ele.currentStyle.attr
;
特点:该属性只兼容IE,不兼容火狐和谷歌
getComputedStyle属性
用法:window.getComputedStyle(ele,null)[attr]
或 window.getComputedStyle(ele,null).attr
(两个参数,元素和伪类。第二个参数不是必须的,当不查询伪类元素的时候可以忽略或者传入 null)
特点:该属性是兼容火狐谷歌,不兼容IE8及以下(IE9及以上版本可兼容)
基于此,我们可以写一个兼容性的方法来获取元素样式:
function getCss(element, attr) {
if (window.getComputedStyle) {
return attr?window.getComputedStyle(element, null)[attr]:window.getComputedStyle(element, null);
}
return attr?element.currentStyle[attr]:element.currentStyle;
}
var oBox = document.getElementById("box");
getCss(oBox,"font-size");
style,currentStyle和getComputedStyle的区别
操作 | 特点 |
---|---|
style | 1.各大浏览器都兼容,能设置样式和获取样式; 2.获取不了外部样式,如果写了行内没有的样式,返回的是空值 |
currentStyle | 1.该属性只兼容IE,不兼容火狐和谷歌; 2.该属性不能设置样式,只能获取样式 |
getComputedStyle | 1.该属性是兼容火狐谷歌,不兼容IE8及以下(IE9及以上版本可兼容); 2.该属性不能设置样式,只能获取样式 |