用js来获取或者设置css相关样式,是很常见的需求,下面将对比一下js中的各个方法;
1,style
var obj = document.getElementById('box');
console.log(obj.style.width);
obj.style.width = '50px';
ele.style[attr]
ele.style.attr
style可以设置也可以获取,各浏览器都兼容,但只能获取行内样式,如果想要获取获取内部样式和外部样式,需要使用:currentStyle,或者getComputedStyle
2,currentStyle getComputedStyle
currentStyle和getComputedStyle只能用于获取值,不能设置值
currentStyle用法:(兼容IE)
ele.currentStyle.attr
ele.currentStyle[attr]
getComputedStyle用法:(兼容火狐和谷歌)
window.getComputedStyle(ele,null)[attr]
window.getComputedStyle(ele,null).attr
下面是获取css样式的兼容方法:
function getStyle(obj,attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj,null)[attr];
} else {
return obj.currentStyle[attr]
}
}
或者更加简写:
function getStyle2(obj,attr) {
return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,null)[attr];
}
注意:通过上面方法获取到的值是带参数的,要使用parseInt或者parseFloat来转成数值;