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


    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);
  • 相关阅读:
    感悟
    shadow classification
    interpolation
    c语言调试技巧
    注册博客园
    用jQuery实现图片预加载和等比例缩小,大图可以点击关闭
    焦点图,带数字显示,支持常见浏览器
    又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
    纯css下拉菜单,支持CSS3圆角
    Jquery 下拉菜单,可以设置颜色,支持CSS3圆角
  • 原文地址:https://www.cnblogs.com/supershare/p/5662439.html
Copyright © 2020-2023  润新知