前提說明：

JavaScript 使用駝峰式版本的屬性與 CSS 中使用的屬性一一對應。

例如，CSS 中的 background-image 就是 JavaScript 中的 backgroundImage。CSS 中的 font-weight 屬性在 JavaScript 中是 fontWeight。

詳細可查看 Mozilla 開發(fā)者網(wǎng)絡提供了可用屬性及其 JavaScript 對應項的全面列表

Element.style 屬性

您可以使用 Element.style 屬性獲取和設置元素的內(nèi)聯(lián)樣式。

Element.style 屬性是一個只讀對象。您可以使用 camelCase 樣式名稱作為對象的屬性來獲取和設置其上的單個樣式屬性 。

<p class="elem" style="background-color: plum; color: white;">
  Hello World!
</p>

let elem = document.querySelector('.elem')

// 如果這個樣式?jīng)]有直接在元素上設置為內(nèi)聯(lián)樣式，它將返回一個空字符串
let bgColor = elem.style.backgroundColor // "plum"
let fontWeight = elem.style.fontWeight // ""

// 設置 background-color 樣式屬性
elem.style.backgroundColor = 'purple'

您還可以使用 Element.style.csstext 屬性在元素本身上獲取和設置整個內(nèi)聯(lián) style 屬性的字符串表示。

// 獲取元素的樣式
let styles = sandwich.style.cssText // "background-color: green; color: white;"

// 完全替換元素上的內(nèi)聯(lián)樣式
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 屬性對于向特定元素添加內(nèi)聯(lián)樣式很有用。

但是，如果您想為所有匹配特定選擇器的元素添加樣式怎么辦？您可以遍歷每個匹配元素并使用 Element.style 屬性添加樣式。

let elems = document.querySelectorAll('.elem')

for (let el of elems) {
  el.style.backgroundColor = 'rebeccapurple'
  el.style.color = 'white'
}

或者，您可以通過創(chuàng)建一個 style 元素并將其附加到 DOM 中來直接向文檔中添加 CSS。

首先，使用 document.createElement() 方法創(chuàng)建一個 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)