前提说明:
JavaScript 使用驼峰式版本的属性与 CSS 中使用的属性一一对应。
例如,CSS 中的 background-image
就是 JavaScript 中的 backgroundImage
。CSS 中的 font-weight
属性在 JavaScript 中是 fontWeight
。
Element.style
属性
您可以使用 Element.style
属性获取和设置元素的内联样式。
Element.style
属性是一个只读对象。您可以使用 camelCase 样式名称作为对象的属性来获取和设置其上的单个样式属性 。
<p class="elem" style="background-color: plum; color: white;">
Hello World!
</p>
let elem = document.querySelector('.elem')
// 如果这个样式没有直接在元素上设置为内联样式,它将返回一个空字符串
let bgColor = elem.style.backgroundColor // "plum"
let fontWeight = elem.style.fontWeight // ""
// 设置 background-color 样式属性
elem.style.backgroundColor = 'purple'
您还可以使用 Element.style.csstext
属性在元素本身上获取和设置整个内联 style
属性的字符串表示。
// 获取元素的样式
let styles = sandwich.style.cssText // "background-color: green; color: white;"
// 完全替换元素上的内联样式
sandwich.style.cssText = 'font-size: 2em; font-weight: bold;'
// 添加额外的样式
sandwich.style.cssText += 'color: purple;'
window.getComputedStyle()
方法
window.getComputedStyle()
方法获取元素的实际计算样式。这会影响浏览器默认样式以及页面上使用的外部样式表。
let elem = document.querySelector('.elem')
let bgColor = window.getComputedStyle(elem).backgroundColor
这是只读的,不能用于实际修改元素的样式。
向文档添加样式
Element.style
属性对于向特定元素添加内联样式很有用。
但是,如果您想为所有匹配特定选择器的元素添加样式怎么办?您可以遍历每个匹配元素并使用 Element.style
属性添加样式。
let elems = document.querySelectorAll('.elem')
for (let el of elems) {
el.style.backgroundColor = 'rebeccapurple'
el.style.color = 'white'
}
或者,您可以通过创建一个 style
元素并将其附加到 DOM 中来直接向文档中添加 CSS。
首先,使用 document.createElement()
方法创建一个 style
元素。然后,使用 Element.textContent
属性将您的 CSS 添加到其中。
最后,您可以使用 Element.append()
方法将其注入到文档中。我喜欢附加到 document.head
,但 document.body
也可以。
let style = document.createElement('style')
style.textContent =
`.elem {
background-color: rebeccapurple
color: white;
}`
document.head.append(style)