JavaScript 中 HTML DOM 樣式屬性介紹
style
屬性用於獲取和設置 inline 使用不同 CSS 屬性的 DOM 元素的樣式。它返回一個 CSSStyleDeclaration
對象,其中包含元素的 style
中定義的所有 CSS 屬性的列表 屬性。
style
屬性對動態非常有幫助 使用 JavaScript 更改 HTML 元素的視覺表示。您可以設置元素的幾乎所有樣式,例如顏色、字體、文本對齊方式、邊距、邊框、背景圖像、大小等。內聯樣式使用 style
直接應用於 HTML 元素 屬性對相鄰元素沒有任何影響。
語法
訪問 style
屬性,您可以使用 getElementById()
方法如下圖:
const elem = document.getElementById('sidebar');
// get CSS property
console.log(elem.style.display);
// set CSS property
elem.style.display = 'block';
查看本指南,了解在 JavaScript 中訪問 DOM 元素的不同方法。
示例
下面的例子演示瞭如何改變顏色 和字體 帶有 id="about"
的 HTML 元素的 CSS 屬性 使用 style
屬性:
const elem = document.getElementById('about');
// change text color to blue
elem.style.color= 'blue';
// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';
上面的代碼會將 HTML 元素的文本顏色改為藍色,使其變為粗體,並將字體大小設置為 18px
.
你可以不 通過將字符串直接分配給 style 屬性來設置 CSS 屬性:
// set property directly (wrong)
elem.style = 'color: blue';
style
屬性是現成的 , 作為 style
屬性返回一個只讀的 CSSStyleDeclaration
目的。相反,您可以使用 style
屬性來設置或獲取單個 CSS 屬性。最好使用 style
屬性來為 HTML 元素設置特定樣式而不更改其他樣式值。
完全覆蓋 元素的現有內聯樣式,style
屬性提供 cssText
屬性:
elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';
或者,您可以使用元素的 setProperty()
指定style
的方法 屬性值:
elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');
查看本指南以了解使用 style
可訪問的所有 CSS 屬性 屬性。
命名約定
正如您在上面看到的,JavaScript 設置 CSS 屬性的方式與 CSS 略有不同。許多 CSS 屬性包含連字符 (-
) 在它們的名稱中,例如 font-weight
, font-size
, text-align
等。由於連字符是保留運算符,在 JavaScript 中被解釋為減號,因此不可能在表達式中使用連字符 .e.g. elem.style.font-size='12px'
.
因此,在 JavaScript 中,CSS 屬性名稱是駝峰式的。連字符被刪除,每個連字符後的直接字母大寫。例如,CSS 屬性 font-size
成為 DOM 屬性 fontSize
, background-color
變成 backgroundColor
, border-left-color
變成 borderLeftColor
,等等。