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. github 如何解决error: failed to push some refs

    错误 error: failed to push some refs to 'https://github.com/whitclass/scrapy-spider.git' hint: Updates ...

  2. 扫描仪扫描文件处理-Photoshop批处理弹出色阶设置框解决

    为什么我录制动作明明设置的有色阶,最后批处理的时候仍然弹出了色阶设置框?   出现问题原因可能是你在录入设置色阶动作的时候,是彩色图片或者灰阶中的一种,而批处理的时候遇到了另外一种色彩模式.所以动作中 ...

  3. 【UNR #2】UOJ拯救计划

    UOJ小清新题表 题目内容 UOJ链接 题面太长了(其实是我懒得改LaTeX了) 一句话题意: 给出 \(n\) 个点和 \(m\) 条边,对其进行染色,共 \(k\) 种颜色,要求同一条边两点颜色不 ...

  4. Python 面向对象(1): 类方法基础

    # 类方法 # 如果 该class 没有要继承的类 则一般需要继承 object 基类 class ClassMethodBase(object): # 起手初始化 以示尊敬 def __init__ ...

  5. Spark如何进行动态资源分配

    一.操作场景 对于Spark应用来说,资源是影响Spark应用执行效率的一个重要因素.当一个长期运行的服务,若分配给它多个Executor,可是却没有任何任务分配给它,而此时有其他的应用却资源紧张,这 ...

  6. 第十九章 Linux中常用字符的特殊含义

    一.引入 在Linux Shell中有很多的特殊符号,要知道这些特殊符号的用法,这些符号用好了可以达到事半功倍的效果. 二.常用符号 # ; ;; . , / \ 'string'| ! {} ? $ ...

  7. JDK源码阅读-------自学笔记(二十四)(java.util.LinkedList 再探 自定义讲解)

    一.实现get方法 1.一般思维实现思路 1).将对象的值放入一个中间变量中. 2).遍历索引值,将中间量的下一个元素赋值给中间量. 3).返回中间量中的元素值. 4).示意图 get(2),传入角标 ...

  8. JAVA递归实现线索化二叉树

    JAVA递归实现线索化二叉树 基础理论 首先,二叉树递归遍历分为先序遍历.中序遍历和后序遍历. 先序遍历为:根节点+左子树+右子树 中序遍历为:左子树+根节点+右子树 后序遍历为:左子树+右子树+根节 ...

  9. 动态规划专题一：线性dp

    第一篇博客随笔,被迫写的bushi 上课讲的动态规划入门,还是得总结一下吧 背包 01背包 背包有容量限制,每一件物品只能够取一件(这就是为什么j从V至v[i]循环的原因) 思路:f数组表示当前状态的 ...

  10. ret2libc--ROP(pwn)漏洞入门分析

    背景知识 fflush 函数,清理缓冲区. fflush(stdout) 一次性输出以上缓冲区所有数据 read(0,&buf,0xAu) 0代表标准输入,标准输出1,标准错误2,&b ...