一、只能改文字嗎?

昨天我們讓按鈕「聽懂」點擊事件。點下按鈕之後，標題就會變化！
但有沒有想過：
「那除了文字之外，可以讓它增加樣式或者有更多別的改變嗎？」

這篇就帶大家來探討如何修改網頁的樣式吧!

二、先來認識classList

根據Day2的說明，CSS可以修改網頁所呈現的樣式，雖然在撰寫網頁的同時會使用到HTML、CSS(SCSS)、JavaScript這些一起運用，但是現階段先帶你認識原來除了CSS以外JavaScript也可以修改網頁樣式。

1. classList 可以取得該元素的 class

<h1 id="title" class="title active">JavaScript</h1>

const title = document.querySelector("#title");
console.log(title.classList);

可以取得到以下容，一樣在console，所以可以將classList想像成

專門管理一個HTML元素身上有哪些class的工具。

2.用classList的方法來新增、刪除class以及查找class

既然classList可以管理他，那我們就可以使用它提供的方法來操作他。

• classList.add() → 新增 class
• classList.remove() → 刪除 class
• classList.contains() → 查尋／確認 class
• classList.toggle() → 有就刪、沒有就加

三、實作練習

我們首先在HTML裡寫一個class:

    <h1 id="title">JavaScript</h1>
    <button id="button">點我</button>

接著再CSS設定一個樣式:

.active{
    font-size: 40px;
    font-weight: bold;
    color: blue;
    font-style: italic;
}

最後我們要將CSS給的樣式寫進JavaScript裡面:

const title = document.querySelector("#title");
const button = document.querySelector("#button")
button.addEventListener("click", function() { title.classList.add('active'); });

其中，最重要的是下面這行button.addEventListener("click", function() { title.classList.add('active'); });昨天是用這個函式將文字做直接修正，現在可以將這句意思改成 「幫 title 加上 active 這個 class！」 。
結果呈現在這~點擊「點我」會套用 active 的樣式

四、結論

通過這五天的練習與概念的講解，大家對JavaScript有了一定的了解
到目前為止，我們已經會：

1. DOM → 找到元素
2. Event → 等待使用者動作
3. textContent → 修改文字
4. classList → 修改 class

學會了這些就代表你已經會「控制」網頁的樣式了!!!給自己一個大大的掌聲👏
不過 JavaScript 不只有這些基本操作。接下來就要開始邁向 JavaScript 的基本功！

下一篇來認識 變數、條件判斷和函式，讓程式變得更為有趣好玩吧!!!