用 DOM 改變元素的 CSS

寫下來要查比較方便，怕以後又忘了。

示範

HTML：

<div class="block">yoyoyo</div>

JavaScript：

const element = document.querySelector('.block')
element.style.background = 'black'
element.style.width = '500px'
element.style.margin = '70px auto'
element.style.padding = '30px'
element.style.color = 'white'
element.style.fontSize = '24px'
element.style.fontFamily = 'sans-serif'
element.style.textAlign = 'center'

Output：

備註：這些樣式會寫到「inline-style」中

特別注意到 . 後面的屬性名稱不能出現 -，所以有 - 的 CSS 屬性要改寫成 CamelCase。

但你真的硬要的話還是可以，只是要寫成這樣：

const element = document.querySelector('.block')
// 改背景顏色
element.style.background = 'black'
element.style.width = '500px'
element.style.margin = '70px auto'
element.style.padding = '30px'
element.style.color = 'white'
element.style['font-size'] = '24px'
element.style['font-faimily'] = 'sans-serif'
element.style['text-align'] = 'center'

不過不建議啦～很難看耶。