透過純粹的JavaScript,我們可以動態地為網頁上的元素應用樣式。
在網頁瀏覽器中,有哪些API可以達成這個目的呢?
首先,其中最乾淨的方式之一就是為元素新增或移除類別,並使用CSS中的類別樣式。
const element = document.querySelector('#my-element')
您可以使用元素的classList
屬性以及其add()
和remove()
方法:
element.classList.add('myclass')
element.classList.remove('myclass')
您也可以直接使用style
屬性修改元素的每個CSS屬性,該屬性會引用元素的內嵌樣式。
例如,您可以這樣修改元素的顏色:
element.style.color = '#fff'
您可以修改元素的邊框:
element.style.border = '1px solid black'
您看到了color
和border
。您可以使用camelCase(駝峰式大小寫)來修改所有的CSS屬性,當CSS屬性名稱包含破折號時。
在這個 MDN 頁面中,您可以方便地找到一個翻譯表,其中列出了所有的CSS屬性。