getComputedStyle获取元素及伪元素样式，currentStyle，setProperty，getPropertyValue

最新推荐文章于 2023-07-12 10:46:23 发布

墨语轩

最新推荐文章于 2023-07-12 10:46:23 发布

阅读量1.5k

点赞数

分类专栏：基础知识文章标签： JS获取CSS属性 JS获取样式 JS获取伪元素样式 computedStyle currentStyle

本文链接：https://blog.csdn.net/MFWSCQ/article/details/104895425

版权

基础知识专栏收录该内容

15 篇文章 0 订阅

订阅专栏

我们首先来看看 Element.currentStyle 吧，Element.currentStyle 是一个与 window.getComputedStyle 方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。该特性是 非标准 的，请尽量不要在生产环境中使用它！

兼容性：

来详细了解getComputedStyle

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

描述

返回的对象与从元素的 style 属性返回的对象具有相同的类型，然而，两个对象具有不同的 target。从 getComputedStyle 返回的对象是只读的，可以用于检查元素的样式（包括由一个 <style> 元素或一个外部样式表设置的那些样式）。elt.style 对象应用于在特定元素上设置样式。

语法

let style = window.getComputedStyle(element, [pseudoElt]);

参数：

element 用于获取计算样式的Element。

pseudoElt 可选，指定一个要匹配的伪元素的字符串。必须对普通元素省略（或 null ）。

返回值

返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。

普通样式属性使用

来个普通的栗子：（栗子注释中由具体说明）

    <style>
        .box{
            width:400px;
            height:300px;
            border:1px solid #c00;
            margin:100px auto;
            font-size:16px;
        }
    </style>
</head>
<body>
    <div class="box" style="width:600px" id="box">this is a box;</div>
    <script>
        let box = document.getElementById('box');

        //如果我们直接通过style来访问只能访问到内联样式
        console.log(box.style.width) // "600px"
        console.log(box.style.height) // ""

        //通过getComputedStyle获取样式
        let styles = getComputedStyle(box);
        
        //然后通过getPropertyValue获取具体属性
        console.log(styles.getPropertyValue('height'))// "300px"
        console.log(styles.getPropertyValue('font-size'))//"16px"
        
        //直接驼峰式访问属性
        console.log(styles.height) //"300px"
        console.log(styles.fontSize) //"16px"

        //获取尺寸这里有单位，可以通过offsetWidth和offsetHeight获取不具有单位
        //但是这里的值会带有border的宽度
        console.log(styles.offsetWidth) //"602"
        
    
    </script>
</body>

与伪元素一起使用

getComputedStyle 可以从伪元素拉取样式信息 (比如, ::after, ::before, ::marker, ::line-marker)

    <style>
        .box{
            width:400px;
            height:300px;
            border:1px solid #c00;
            margin:100px auto;
            font-size:16px;
        }
        .box::after{
            content:'hello world';
            border:1px solid #c00;
            width:200px;
            height:100px;
            display:inline-block;
            margin-left:100px;
        }
    </style>
</head>
<body>
    <div class="box" style="width:600px" id="box">this is a box;</div>
    <script>
        let box = document.getElementById('box');
        //获取after 的属性列表
        let after = getComputedStyle(box,'::after');

        //直接驼峰式属性名访问
        console.log(after.content); //""hello world""

        //通过getPropertyValue访问
        console.log(after.getPropertyValue('border')); //"1px solid rgb(204, 0, 0)"

        //驼峰式属性名访问
        console.log(after.border); //"1px solid rgb(204, 0, 0)"
    </script>
</body>

注意：

返回的 CSSStyleDeclaration 对象将包含所有受支持的CSS属性长名称的活动值。例如名称是 border-bottom-width，border-width 和 border 是示例速记属性名称。仅使用像 font-size 这样的名字来查询值是最安全的。查询诸如font等简写名称不适用于大多数浏览器。

CSS规范也允许使用驼峰命名，比如 fontSize 或 paddingTop 。

CSS属性值可以使用 getPropertyValue(propName) API或直接索引到对象，如 box['z-index'] 或 cs.zIndex 。

getComputedStyle 的返回值是 resolved values，通常跟CSS2.1中的 computed values是相同的值。但对于一些旧的属性，比如width， height， padding 它们的值又为 used values。最初，CSS2.0 定义的计算值 Computed values 就是属性的最终值。但是 CSS2.1 重新定义了 computed values 为 布局前 的值， used values 布局后 的值。布局前与布局后的区别是， width 或者 height 的百分比可以代表元素的宽度，在布局后会被像素值替换。

在某些情况下，通过浏览器会特意返回不准确的值。特别是在避免CSS 浏览历史泄露的安全问题，比如，浏览者看过某个网站，它的链接通常会变成蓝色带下划线的链接，通过判断链接的颜色（getComputedSytle(node, null).color) 是否为蓝色，就会泄露用户的浏览历史，所以浏览器会特意返回不准确的值，保护用户隐私。

在 CSS transitions 中，getComputedStyle返回的是 Firefox中的原始属性值，但返回 WebKit 中的最终属性值。在 chrome 浏览器中我们样式中没有指明 delay，但是结果中有 delay 0s 。

    <style>
        .box{
            transition:all .2s linear;
        }
    </style>
</head>
<body>
    <div class="box" id="box">this is a box;</div>
    <script>
        let box = document.getElementById('box');
        let styles = getComputedStyle(box);
        console.log(styles.getPropertyValue('transition'));//"all 0.2s linear 0s"
        console.log(styles.transition); //"all 0.2s linear 0s"
    </script>
</body>

另外，我们在栗子中用到了getPropertyValue方法，下面对getPropertyValue及相关的方法作一个说明：

getPropertyValue

语法

var value = style.getPropertyValue(property);

参数：property 应是一个 DOMString ，为所需要查询的 CSS 属性名称

返回值：value 是 DOMString，包含有欲查找的 CSS 属性的值. 若原 CSSStyleDeclaration 没有设置对应属性，则返回空字符串

`setProperty`

为一个声明了CSS样式的对象设置一个新的值。

语法

style.setProperty(propertyName, value, priority);

参数：

propertyName 是一个 DOMString ，代表被更改的CSS属性。
value 可选是一个 DOMString ，含有新的属性值。如果没有指定, 则当作空字符串。
注意: value 不能包含 "!important" 应该使用 priority 参数.
priority 可选是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定, 则当作空字符串。

返回值：undefined

和setProperty功能相同但更简单直接的设置方式：

JavaScript 有一个特别的，更简单的在 CSSStyleDeclaration 对象上设置CSS属性值的语法，例如：box.style.color = '#c00';

style.cssPropertyName = 'value';

`removeProperty`

移除style对象的一个属性

语法：

var oldValue = style.removeProperty(property);

参数：property 是一个DOMString，代表要移除的属性名。注意由多个单词组成的属性要用连字符连接各个单词，不接收驼峰命名法的形式。

返回值：oldValue 是一个 DOMString ，等于被移除的属性在移除前的属性值。

墨语轩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
getComputedStyle获取元素及伪元素样式，currentStyle，setProperty，getPropertyValue

我们首先来看看 Element.currentStyle 吧，Element.currentStyle是一个与window.getComputedStyle 方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。该特性是非标准的，请尽量不要在生产环境中使用它！兼容性：来详细了解getComputedStyleWindow.getComputedStyle() 方法返回一个...
复制链接

扫一扫