获取指定元素的某一个样式属性值

1、"元素.style.样式属性名" ->oDiv.style.height
 弊端:"只能"获取在"行内"上编写过的样式,不管在哪些了对应的样式,只要没有在行内上写过,都获取不到
 oDiv.style.height 由于height并没有写在行内样式上(写在样式表里了),所以获取的结果依然是""

2、通过 window.getComputedStyle 获取所有经过浏览器计算的样式(只要的你的元素在浏览器加载的时候渲染过,能够在页面中展示,那么当前元素的所有的样式都是经过浏览器计算的,哪怕你没有写)
window.getComputedStyle(要操作的元素,元素的伪类(JS一般不用->null)) ->这个获取到的结果是一个对象数据类型的值(CSSStyleDeclaration内置类的一个实例),里面包含了我们所有经过浏览器计算过的样式属性名和属性值
我们想获取其中某一个样式的值,只需要对象.属性名即可->获取的结果根据自身的情况是带这个单位的
var obj = window.getComputedStyle(oDiv, null);

虽然上述的方法很好用,但是在IE6~8下不兼容 ->currentStyle
var obj = oDiv.currentStyle;

function getCss(curEle, attr) {//getCss:获取指定元素的某一个样式属性的值 cureEle当前要操作的元素 attr当前需要获取样式的属性名

    var val = null, reg = null;
    if ("getComputedStyle" in window) {
        val = window.getComputedStyle(curEle, null)[attr];
    } else {
        if (attr === "opacity") {
                //对于我们的IE6~8浏览器,透明度这个样式,它使用的不是opacity,而是filter,在部分浏览器中我们如果通过opacity获取透明度的话是获取不到的     
            val = curEle.currentStyle["filter"];

            reg = /^alpha\(opacity=((?:\d|(?:[1-9]\d+))(?:\.\d+)?)\)$/;
            var tempVal = reg.exec(val);
            val = tempVal ? tempVal[1] / 100 : 1; //filter是把opacity的值*100得到的,我们还需要把得到的值/100才和我们的opacity保持统一

        } else {
            val = curEle.currentStyle[attr];
        }
    }
    reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?(px|pt|em|rem)$/;  //如果获取的是数字+单位  我们把单位去掉 否则获取的是什么 我们就返回什么
    return reg.test(val) ? parseFloat(val) : val;
}

var a = getCss(oDiv, "opacity");
console.log(a);

转载于:https://www.cnblogs.com/supershare/p/5662439.html