JobbyM's Blog

JS获取CSS属性

主要是介绍一些使用js 来获取元素的CSS 样式的方法

一、style

我们可以使用element.style 获取元素的CSS 样式声明对象,以及设置元素的CSS 样式声明对象。

注意:element.style 只能获取元素style 属性中的CSS 样式。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.bg {
height: 30px;
}
</style>
<div class="bg" style="width: 200px;">
使用element.style 获取CSS 属性值
</div>
<script>
console.log(document.querySelector('.bg').style.width) // 200px
console.log(document.querySelector('.bg').style.height) // ''
</script>

二、Window.getComputedStyle()

Widnow.getComputedStyle() 是一个可以获取当前元素所有最终使用的CSS 属性值。返回的是一个CSS样式声明对象([ojbect CSSStyleDeclaration]),只读。

语法:

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

例子:

1
2
3
4
5
6
7
8
9
<style>
h3::after {
content: "rocks!"
}
</style>
<h3>使用getComputedStyle获取CSS 属性值</h3>
<script>
console.log(getComputedStyle(document.querySelector('h3'), '::after').content) // "rocks!"
</script>

在许多在线的演示代码中,getComputedStyle 是通过 document.defaultView 对象来调用的。大部分情况下,这是不需要的,因为可以直接通过window 对象调用。但有一种情况,你必须使用defaultView,那就是在firefox3.6 上访问框架(iframe)的样式。

三、currentStyle

currentStyle 是IE 浏览器自娱自乐的一个属性,返回的是元素当前应用的最终CSS 属性值(包括外链CSS 文件,页面中嵌入的<style> 属性)

语法:

1
element.currentStyle

获取一个元素的高度,可以使用类似下面的代码:

1
(element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null)).height

四、参考文档

  1. 获取元素CSS值之getComputedStyle方法熟悉
  2. Window.getComputedStyle() - Web API 接口 | MDN
  3. JS获取CSS属性值