zoukankan      html  css  js  c++  java
  • 获取元素计算样式getComputedStyle()与currentStyle

    window.getComputedStyle()方法是标准化接口,返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

    目前主流浏览器均支持getComputedStyle()获取元素计算样式。

    语法:

    getComputedStyle(element [,pseudoElt])

    element

    用于获取计算样式的Element。

    pseudoElt

    可选

    指定一个要匹配的伪元素的字符串。必须对普通元素省略(或null)。

    案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h3::after {
                content: "rocks!";
            }
        </style>
    
    </head>
    
    <body>
    
        <h3>generated content</h3>
        <script>
            let h3 = document.querySelector('h3'),
                result = getComputedStyle(h3, '::after').content;
    
            console.log(`the generated content is: ${result}`);
            //=> the generated content is: "rocks!"
         
        </script>
    </body>
    
    </html>
    

      

    参考文献:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

    currentStyle是微软推出的针对IE浏览器的标准,并非标准接口,主要是对IE8及以下版本支持该属性。

    语法:

    elementget.currentStyle

    微软开发文档参考:

    https://docs.microsoft.com/en-us/previous-versions//ms528441(v=vs.85)

    实际开发过程中,若需要考虑两者的兼容性:

    /*obj为元素DOM,name为元素属性,类型为字符串。可以通过360浏览器可以单独测试IE浏览器下的情况。
     *
     */
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj, null)[name];
        }
    }
    

      

  • 相关阅读:
    数据库学习 ORA12545:因目标主机或对象不存在,连接失败
    Oracle创建命名空间和新用户
    创建一个命名空间
    修改用户密码
    Oracle启动
    数据库表中列类型的修改和ALTER的用法
    修改列类型
    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
    css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
    jQuery Google Charts一个封装google chart api的jquery插件 饼状图
  • 原文地址:https://www.cnblogs.com/f6056/p/11357691.html
Copyright © 2011-2022 走看看