JavaScript 精确获取样式属性（下）

在上一篇文章中，我们介绍了如何使用 getComputedStyle 方法获取元素的计算样式，但是这个方法有一些局限性，本篇文章会继续探讨如何在 JavaScript 中精确获取元素的样式属性。

获取 transform 中的具体属性

在 CSS3 中，transform 属性可以改变元素的形状、大小和位置等，它有很多子属性，如 translate、rotate、scale 等等。我们在获取元素的 transform 属性时，有时候需要具体获取其中的某一个子属性。此时，我们可以使用 getComputedStyle 方法和字符串的 match() 方法来匹配我们需要获取的属性。

示例代码：

<div id="demo" style="transform: translate(20px, 30px) scale(2) rotate(45deg)"></div>

let demo = document.getElementById('demo')
let transform = getComputedStyle(demo).transform
let matches = transform.match(/(\d+)/g)
let translateX = parseInt(matches[0]) // 20
let translateY = parseInt(matches[1]) // 30
let scale = parseInt(matches[2]) // 2
let rotate = parseInt(matches[3]) // 45

获取伪元素的样式

有时候，我们需要获取伪元素的样式。比如说，我们想要获取 ::before 元素的 content 属性，我们可能会尝试去使用 getComputedStyle 方法，但是这个方法只能获取到元素本身的计算样式，而无法获取到伪元素的样式。此时，我们可以使用 Window.getComputedStyle() 方法和 Document.createRange() 方法来获取伪元素的样式。

示例代码：

<div id="demo">
  <p>这是一个段落</p>
</div>

<style>
  #demo::before {
    content: 'before文本';
    color: red;
  }
</style>

let range = document.createRange()
range.selectNode(document.getElementById('demo'))

let beforeElement = range.createContextualFragment('<span></span>')
beforeElement.classList.add('demo-before')
document.getElementById('demo').appendChild(beforeElement)

let before = window.getComputedStyle(document.querySelector('.demo-before'), ':before')
console.log(before.content) // "before文本"
console.log(before.color) // "rgb(255, 0, 0)"

扩展阅读：

JavaScript 精确获取样式属性（上）