修改 DOM 元素样式

在网页的互动效果中，常常是当使用者符合了某个条件时，画面上的元素产生令人惊喜的变化，这些变化可简单可复杂，小至只有颜色的改变，大至元素形状或位置的改变，目前学习到操作样式的改变有两种途径：

HTMLElement.style：只能针对指定的属性做样式修改，如果变化比较复杂，使用classList应该是比较好的做法
Element.classList：是Element物件定义的一个特性，它的值是一个可迭代的类阵列物件，并且有以下四种方法可以使用
- add()：增加指定的class name
- remove() ：移除指定的class name
- contains() ：确认是否包含括号内给定的class name
- toggle() ：有包含指定的 class name就移除，没有的话就加上去

知道这些语法之後，脑袋一直浮现部落格常见的白天黑暗模式的切换钮，所以决定用codepen练习一下。

首先我们先准备基本的切换钮和示范用文章，下面是 HTML 结构：

<!--切换钮-->
<div>
  <div class="bar">
    <span class="icon moon"><i class="far fa-moon"></i></span>
    <span class="icon sun"><i class="fas fa-sun"></i></span class="icon">
    <span class="base-mode"></span>
  </div>
</div>
<!--文章-->
<article>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum ipsam animi maiores, commodi nostrum eos. Lorem ipsum dolor sit amet.</p>
</article>

用CSS简单美化一下变成这样：

以下是待会要利用JS动态加到元素上的样式

.dark {
  background-color: #222;
  color: #fff;
  transition: background-color 1s ease;
}

.slide {
  transform: translateX(60px);
  transition: all .5s;
}

前置准备好之後，我们要进入关键步骤了！来写 JS ～

步骤 1: 先选取元素，并绑上监听器

const button = document.querySelector('button');
button.addEventListener('click', changeMode);

步骤 2: 点击button时，button会滑动

function changeMode(e) {
  if (e.target.tagName === 'BUTTON') {
    e.target.classList.toggle('slide')
    
    // 下一个步骤的程序码
  }  
}

步骤 3: 改变背景和文字颜色

if (document.body.classList.contains('dark')) {
    document.body.classList.remove('dark')
} else {
    document.body.classList.add('dark')
}

//上面的if-else 可以用下面的toggle整个替代
document.body.classList.toggle('dark')