js中获取css中的样式方法:style,currentStyle,getComputedStyle

尉迟远
2023-12-01

用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来转成数值;

 类似资料: