有时仅靠 CSS 是不够的。您可能需要使用 JavaScript 控制 CSS 值。但是如何在 JavaScript 中获取 CSS 值呢?
事实证明,有两种可能的方法,具体取决于您是尝试获取内联样式还是计算样式。

取内联样式

内联样式是存在于HTMLstyle属性中的样式。

<div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div>

要获得内联样式,您可以使用style属性。

const element = document.querySelector('.element')

const fontSize = element.style.fontSize
console.log(fontSize) // 2em

const color = element.style.color
console.log(color) // red

获取计算样式

如果你的样式写在 CSS 文件中,你需要获取计算的样式。为此,您可以使用getComputedStyle
它接受两个值:

const style = getComputedStyle(Element, pseudoElement);
参数 含义
Element 需要检索的DOM元素
pseudoElement 伪元素字符串(可选)

让我们通过一个例子来帮助理解事物。假设您有以下 HTML 和 CSS:

<div class="element"> This is my element </div>
.element { background-color: red }

首先,您需要使用querySelector检索对象。然后使用getComputedStyle来获取元素的样式。

const element = document.querySelector('.element')
const style = getComputedStyle(element)

如果您查看style,您应该看到一个包含每个 CSS 属性及其各自值的对象。

CSSStyleDeclaration {0: 'accent-color', 1: 'align-content', 2: 'align-items', 3: 'align-self', 4: 'alignment-baseline', 5: 'animation-delay', 6: 'animation-direction', 7: 'animation-duration', 8: 'animation-fill-mode', 9: 'animation-iteration-count', 10: 'animation-name', 11: 'animation-play-state', 12: 'animation-timing-function', 13: 'appearance', 14: 'backdrop-filter', 15: 'backface-visibility', 16: 'background-attachment', 17: 'background-blend-mode', 18: 'background-clip', 19: 'background-color', 20: 'background-image', 21: 'background-origin', 22: 'background-position', 23: 'background-repeat', 24: 'background-size', 25: 'baseline-shift', 26: 'block-size', 27: 'border-block-end-color', 28: 'border-block-end-style', 29: 'border-block-end-width', 30: 'border-block-start-color', 31: 'border-block-start-style', 32: 'border-block-start-width', 33: 'border-bottom-color', 34: 'border-bottom-left-radius', 35: 'border-bottom-right-radius', 36: 'border-bottom-style', 37: 'border-bottom-width', 38: 'border-collapse', 39: 'border-end-end-radius', 40: 'border-end-start-radius', 41: 'border-image-outset', 42: 'border-image-repeat', 43: 'border-image-slice', 44: 'border-image-source', 45: 'border-image-width', 46: 'border-inline-end-color', 47: 'border-inline-end-style', 48: 'border-inline-end-width', 49: 'border-inline-start-color', 50: 'border-inline-start-style', 51: 'border-inline-start-width', 52: 'border-left-color', 53: 'border-left-style', 54: 'border-left-width', 55: 'border-right-color', 56: 'border-right-style', 57: 'border-right-width', 58: 'border-start-end-radius', 59: 'border-start-start-radius', 60: 'border-top-color', 61: 'border-top-left-radius', 62: 'border-top-right-radius', 63: 'border-top-style', 64: 'border-top-width', 65: 'bottom', 66: 'box-shadow', 67: 'box-sizing', 68: 'break-after', 69: 'break-before', 70: 'break-inside', 71: 'buffered-rendering', 72: 'caption-side', 73: 'caret-color', 74: 'clear', 75: 'clip', 76: 'clip-path', 77: 'clip-rule', 78: 'color', 79: 'color-interpolation', 80: 'color-interpolation-filters', 81: 'color-rendering', 82: 'column-count', 83: 'column-gap', 84: 'column-rule-color', 85: 'column-rule-style', 86: 'column-rule-width', 87: 'column-span', 88: 'column-width', 89: 'content', 90: 'cursor', 91: 'cx', 92: 'cy', 93: 'd', 94: 'direction', 95: 'display', 96: 'dominant-baseline', 97: 'empty-cells', 98: 'fill', 99: 'fill-opacity', …}

getComputedStyle 返回一个包含每个 CSS 属性及其各自值的对象

您还可以在 Chrome 和 Firefox 的开发工具中看到这个对象。

对于 Firefox 开发工具,请查看“Inspector”、“Computed”。

对于 Chrome 开发工具,请查看“元素”下。如果开发工具窗口很大,您可以在右侧面板上看到计算出的样式。如果开发工具窗口很小,您可以在“计算”选项卡下查看。

要获取 CSS 属性的值,请使用驼峰式大小写来编写该属性。

const style = getComputedStyle(element)

const backgroundColor = style.backgroundColor
console.log(backgroundColor) // rgb(0, 0, 0)

注1:getComputedStyle是只读的。不能通过getComputedStyle修改样式的值.
注2:getComputedStyle获取计算出的 CSS 值,会返回px单位,没有相对单位,例如:emrem

从伪元素获取样式

要从伪元素获取样式,您需要将伪元素的字符串作为第二个参数传递给getComputedStyle

<div class="element"> This is my element </div>
.element { background-color: red }
.element::before { content: "Before pseudo element"; }
const element = document.querySelector('.element')
pseudoElementStyle = getComputedStyle(element, '::before')
console.log(pseudoElementStyle.content) // Before pseudo element

总结

你可以通过两种方法在 JavaScript 中获取 CSS 值:

  1. style属性
  2. getComputedStyle方法

style属性仅检索内联 CSS 值,而getComputedStylestyle 检索计算出的 CSS 值。

本文转自:https://zellwk.com/blog/css-values-in-js/

2021年09月27日 15:05:29
1