今天要介紹的是如何修改 DOM 節點的樣式，稍微介紹一下前端的三劍客：

1. HTML: 負責資料結構。
2. CSS: 負責樣式跟結構如何呈現。
3. JavaScript: 負責網頁元素的行為跟互動。

這三個分工很明確，如果是該給 CSS 處理的就盡量不要使用 JavaScript。不過在有時候也沒有辦法避免需要使用到 JavaScript 來修改樣式，那這樣會如何來處理呢？ 有以下幾種方式：

1. 直接修改元素的 style 屬性。
2. 修改 className 屬性或者是用 classList。
3. 直接使用 JavaScript 寫入 CSS。

下列就來介紹如何做到這些：

1. 修改 style 屬性

<div class="box"></div>

let box = document.querySelector('.box')
box.style.color = 'green'

上面的寫法是透過 DOM api 修改了指定元素的顏色屬性，而這樣的寫法的優先級會高過多數的樣式寫法。(除了 !important)，需要特別注意的是，在 CSS 的屬性中間都會有 "-" 這個符號，像是 font-weight, text-align 等等的，這些在 JavaScript 裡面都要改成駝峰式的寫法才不會噴錯。

box.style.textAlign = 'center'

2. 修改 class 屬性
   直接透過 style 屬性修改的方式很方便，但是會造成不易維護的問題。那我們怎樣透過 JavaScript 修改標籤裡面的 class 屬性？跟 style 不一樣的是， class 在 JavaScript 裡面是一個保留的關鍵字，所以是透過 className 來修改標籤內的 class 屬性的。

// CSS
.large-font{
  font-size: 26px;
  line-height: 2;
}

.small-font{
  font-size: 16px;
  line-height: 1.5;
}
// HTML
<article id="article" class="small-font">...</article>

// JavaScript
let article = document.querySelector('#article')
article.className = 'large-font'

這樣就可以替換成我們要的 class 了！

3. 使用 JavaScript 寫入 CSS 樣式
   使用 document.createElement 來新增 link 標籤

let head = document.querySelector('head')
let linkTag = document.createElement('link')

linkTag.rel = 'stylesheet'
linkTag.type = 'text/css'
linkTag.href = 'xxx.css'

head.appendChild(linkTag)

這樣就可以了！

以上就是簡單介紹 JavaScript 透過 DOM api 來修改節點的方式。
大家我們明天見囉～