zoukankan      html  css  js  c++  java
  • 获取指定元素的某一个样式属性值

    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);
  • 相关阅读:
    兄弟连,一般人来不起,来的肯定不是一般人!
    50天之脱变,66期第一个项目感受。切记平常心
    2016十大影响事件
    为什么要写年终总结
    20161228阅读笔记
    为什么要认识牛人
    李笑来:演讲能力是我这一生有幸学到的最重要能力
    张辉:工作几年就应该给自己“清零”
    小马宋:目标决定方法~坚持目标而不是方法
    李笑来的财务自由法~把一份时间卖出很多份
  • 原文地址:https://www.cnblogs.com/supershare/p/5662439.html
Copyright © 2011-2022 走看看