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];

    }

}

　　

获取元素计算样式getComputedStyle（）与currentStyle的更多相关文章

  1. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  2. JS获取元素计算过后的样式

    获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...

  3. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  4. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  5. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  6. 获取非行间样式getComputedStyle

    有如下代码: 1 2 3 div {     width: 200px; } 1 2 3 <div id="aa" style="height: 100px;&qu ...

  7. （知识点）JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  8. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  9. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

随机推荐

  1. 极简 Node.js 入门 - 5.2 url & querystring

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  2. Mysql索引（一篇就够le）

    我想很多人对mysql的认知可能就是CRUD(代表创建(Create).更新(Update).读取(Retrieve)和删除(Delete)操作),也不敢说自己会用和熟悉mysql,当然我就是其中一个 ...

  3. 闭嘴，给你一个数！1分钟，学完C语言指针，不扎手只扎心的针！

    序言 指针是C语言学习者绕不过的一道坎,也是C语言学习者不得绕过的一道坎.辨别一个人C语言学的好赖就看他对指针的理解怎么样.指针内容也是工作面试经常问到的问题.本文将带你重新认识那个绊倒你的指针,以解 ...

  4. centos8使用hostnamectl管理主机名称

    一,查看hostnamectl所属的包: [root@yjweb ~]# whereis hostnamectl hostnamectl: /usr/bin/hostnamectl /usr/shar ...

  5. 经典剪枝算法的例题——Sticks详细注释版

    这题听说是道十分经典的剪枝算的题目,不要问我剪枝是什么,我也不知道,反正我只知道用到了深度搜索 我参考了好多资料才悟懂,然后我发现网上的那些大神原理讲的很明白,但代码没多少注释,看的很懵X,于是我抄起 ...

  6. Java安全之Commons Collections3分析

    Java安全之Commons Collections3分析 文章首发:Java安全之Commons Collections3分析 0x00 前言 在学习完成前面的CC1链和CC2链后,其实再来看CC3 ...

  7. SWPUCTF_2019_p1KkHeap

    SWPUCTF_2019_p1KkHeap 环境:ubuntu18 考点:UAF,沙箱逃逸 ubuntu18现在不能构造double free了!!! 所以我用patchelf来做 IDA逆一下 可以 ...

  8. 一些常见JAVA问题

    原文:https://blog.csdn.net/weiyongxuan/article/details/45920765 一.Java的异常的基类是java.lang.Throwable 二.守护线 ...

  9. [分享] 通过修改CSS自定义chrome滚动条样式

    首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall ...

  10. java数据结构-12树相关概念

    一.树 1.概念: 包含n(n>=0)个结点的有穷集:树有多个节点(node),用以储存元素.某些节点之间存在一定的关系,用连线表示,连线称为边(edge).边的上端节点称为父节点,下端称为子节 ...