• js访问CSS最终计算样式


    所谓计算样式,就是嵌入式样式、外部样式表、内联样式综合的样式表现,那么如何来获取呢?

    “DOM2 级样式”增强了document.defaultView,提供了getComputedStyle()方法,可以调用最终的样式。

    这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例 如":after")。如果不需要伪元素信息,第二个参数可以是null。

    getComputedStyle()方法返回一 个CSSStyleDeclaration 对象(与style 属性的类型相同),其中包含当前元素的所有计算的样式。

    以下面这个HTML 页面为例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Computed Styles Example</title>
    <style type="text/css">
    #myDiv {
        background-color: blue;
        width: 100px;
        height: 200px;
    }
    </style>
    </head>
    <body>
        <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
    </body>
    </html>

    js:

    var myDiv = document.getElementById("myDiv");
    var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
    alert(computedStyle.backgroundColor); // "red",不是blue

    后面就可以通过 computedStyle 来访问最终的样式了!

    但是,边框属性可能 会也可能不会返回样式表中实际的border 规则(Opera 会返回,但其他浏览器不会)。存在这个差别的原因是不同浏览器解释综合(rollup)属性(如border)的方式不同,因为设置这种属性实际上会涉及 很多其他属性。在设置 border 时, 实际上是设置了四个边的边框宽度、颜色、样式属性( border-left-width 、border-top-color 、border-bottom-style ,等等)。因此, 即使 computedStyle.border 不会在所有浏览器中都返回值,但computedStyle.borderLeftWidth 会返回值!

    但是!IE9之前版本不支持 getComputedStyle() 方法;

    在IE 中,每个具有style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例,包含当前元素全 部计算后

    的样式。取得这些样式的方式也差不多,如下面的例子所示。

    var myDiv = document.getElementById("myDiv");
    var computedStyle = myDiv.currentStyle;
    alert(computedStyle.backgroundColor); //"red"

    所以兼容下IE9之前版本,代码就是这个样子:

    var myDiv = document.getElementById("myDiv");
    var computedStyle = document.defaultView?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle;
    alert(computedStyle.backgroundColor); // "red",不是blue

    当然除了这个方法,js高程里还有另外一个方法,去获取样式表的内容,然后一个个去调用样式表,去改,但是我觉得太麻烦了,要学的去翻书哦~

    参考资料:

    JavaScript高级程序设计-第3版

  • 相关阅读:
    分治
    #include<algorithm>
    c++标准模板库的使用
    mysql_day03
    mysql_day02
    mysql_day01
    mongodb的安装
    迭代器和生成器简单介绍
    File文件操作
    数据类型
  • 原文地址:https://www.cnblogs.com/xianshenglu/p/8118704.html
Copyright © 2020-2023  润新知