JS 获取元素的具体样式信息 兼容处理

获取元素的具体样式信息

如果我想获取某一个具体的样式属性值

元素.style.属性名

需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的)

真是项目中, 这种方法不常用, 因为不能为了获取值而把所有的样式都写在行内(无法实现CSS和HTML的分离)

window.getComputedStyle

使用window.getComputedStyle这个方法获得所有经过浏览器计算过的样式

所有经过浏览器计算过的样式:
只要当前的元素标签可以在页面中呈现出来, 那么它的所有的样式都是经过浏览器计算过的(渲染过的), 哪怕有些样式你没有写, 我们也可以获取到.

window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类), 一般我们不用伪类, 写null

window.getComputedStyle(element, null).width

方法虽然好用, 但是在IE6-8下是不兼容的:
因为window下没有getComputedStyle这个属性, 在IE6-8下执行这个方法会报错

在IE6-8下我们可以使用currentStyle来获取所有当前计算过的所有样式

box.currentStyle.height

兼容

使用trycatch来处理兼容

前提, 必须保证try中的代码在不兼容浏览器中执行的时候报错, 这样的话我们才可以用catch捕获到异常的信息, 进行其他的处理.
不管当前是什么浏览器, 都需要先把try中的代码执行一遍, 如果当前是IE7, window.getComputedStyle本身是不兼容的, 但是我也要先把它执行一遍, 报错了再把curEle.currentStyle执行一遍(消耗性能)

只有在不得已的情况下才使用它

function getCss(curEle, attr){
    var val = null;
    try{
        val = window.getComputedStyle(curEle, null)[attr];
    } catch(e){
        val = curEle.currentStyle[attr];
    }
    return val;
}
console.log(getCss(box, "height"));

检测属性或者方法

function getCss(curEle, attr){
    var val = null;
    if( "getComputedStyle" in window){
        val = window.getComputedStyle(curEle, null)[attr]
    } else {
        val = curEle.currentStyle[attr]
    }
    return val;
}
console.log(getCss(box, "height"));

首先获取属性值, 兼容返回的是一个函数, 转换为boolean是true, 不兼容返回的是一个undefined, 转换为boolean是false

function getCss(curEle, attr){
    var val = null;
    if( window.getComputedStyle){
        val = window.getComputedStyle(curEle, null)[attr]
    } else {
        val = curEle.currentStyle[attr]
    }
    return val;
}
console.log(getCss(box, "height"));

function getCss(curEle, attr){
    var val = null;
    if( typeof window.getComputedStyle === "function"){
        val = window.getComputedStyle(curEle, null)[attr]
    } else {
        val = curEle.currentStyle[attr]
    }
    return val;
}
console.log(getCss(box, "height"));

检测当前浏览器

window.navigator.userAgent

获取值不一样

标准浏览器和IE浏览器获取的结果还是不一样的, 对于部分部分样式属性, 不同浏览器获取的结果不一样, 主要是由于getComputedStyle和curEle.cureentStyle差异造成的.

在获取复合样式时, 尽量拆开写

初始化样式

写CSS的时候第一步初始化默认样式, 避免浏览器之间的差异, 不仅如此, 而且写的默认样式对于JS以后获取的结果统一也是有帮助的.

* {
marigun: 0;
padding: 0;
}

去单位

得到的结果可以直接参与运算

function getCss(curEle, attr){
    var val = null, reg = null;
    if( typeof window.getComputedStyle === "function"){
        val = window.getComputedStyle(curEle, null)[attr]
    } else {
        val = curEle.currentStyle[attr]
    }
    reg = /^(-?d+(.d+)?)(px|pt|rem|em)?$/i;
    return reg.test(val) ? parseFloat(val) : val;
}

 console.log(getCss(box, "height"));
 console.log(getCss(box, "float"));
 console.log(getCss(box, "border"));

200
none
10px solid rgb(0, 128, 0)

名称兼容

opacity, 是设置透明度, 在IE6-8中不兼容

filter: alpha(opacity=10), 不兼容的话使用filter获得

function getCss(curEle, attr) {
      var val = null,
        reg = null;
      if (typeof window.getComputedStyle === "function") {
        val = window.getComputedStyle(curEle, null)[attr];
      } else {
        if (attr === "opacity") {
          val = curEle.currentStyle["filter"];
          reg = /^alpha(opacity=(d+(?:.d+)?))$/i;
          val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
        } else {
          val = curEle.currentStyle[attr];
        }
      }
      reg = /^(-?d+(.d+)?)(px|pt|rem|em)?$/i;
      return reg.test(val) ? parseFloat(val) : val;
    }

在IE6-8下获取 alpha(opacity=10)后, 提取10并除以100获得标准浏览器下的opaclity的值 0.1