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. Java基础系列-SPI你认识吗

    原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755313.html 一.SPI是什么 SPI是相对API而言的. API指的是应用对服务调用方提供 ...

  2. Ubuntu 20.04上通过Wine 安装微信

    没有想过会在一个手机软件上花这么多心思,好在今天总算安装成功,觉得可以记录下这个过程,方便他人方便自己. 首先介绍下我使用过的其他方法,希望可以节省大家一些时间: Rambox Pro:因为原理是网页 ...

  3. navicat 生成注册码( 仅供学习使用 )

    前言,由于navicat使用比较顺手,刚好前段时间试用期到,又看看了怎么生成注册码,特地记录下使用 . 1.运行 找到 navicat 文件(exe) 2.生成注册文件(报错好,后续会用到) 3.断网 ...

  4. Linux+Nginx/Apache下的PHP exec函数执行Linux命令

    1.php.ini配置文件 打开PHP的配置文件,里面有一行 disable_function 的值,此处记录了禁止运行的函数,在里面将exec和shell_exec.system等函数删除. 2.权 ...

  5. 第七章 TCP和UDP原理

    一.引入 1.TCP/IP协议族的传输层协议主要包括TCP和UDP 2.TCP是面向连接的可靠的传输层协议.它支持在并不可靠的网络上实现面向连接的可靠的数据传输 3.UDP是无连接的传输协议,主要用于 ...

  6. 如何玩转Python? 一文总结30种Python的窍门和技巧

    Python作为2019年必备语言之一,展现了不可替代作用.对于所有的数据科学工作者,如何提高使用Python的效率,这里,总结了30种Python的最佳实践.技巧和窍门.希望这些可以帮助大家在202 ...

  7. GitHub如何删除项目库Repositories

    1.在头像那里找到settings按钮 2.选择repositories 3.找到你要删除的项目 4.点击settings 5.滑到页面最下面,点击delete 7.输入项目名称,复制即可 8.删除后 ...

  8. 关于c++ string类的一些使用

    主要最近要用的上 才整理一下 用string类别忘了导入头文件 #include <string> 注意这个细节:cout 可直接输出 string 类的对象的内容 但是printf不可以 ...

  9. 联赛模拟测试25 C. Repulsed 贪心+树形DP

    题目描述 分析 考虑自底向上贪心 \(f[x][k]\) 表示 \(x\) 下面距离为 \(k\) 的需要灭火器的房间数,\(g[x][k]\) 表示 \(x\) 下面距离为 \(k\) 的多余灭火器 ...

  10. 使用udev高效、动态的管理Linux设备文件

    导读: 在Linux环境中,所有的设备都以文件的形式存在,在早期的Linux版本中,/dev目录包含了了所有可能出现的设备文件,很难想象Linux用户如何从大量的设备文件中找到想要的设备文件.举个例子 ...