4.6 DOM 操控 class

.classList.add()

讓某元素加上指定的 class。

.classList.remove()

讓某元素移除指定的 class。

.classList.contains()

判斷某元素是否存在某個 class。

.classList.toggle()

某元素若存在某個 class，就移除；反之，就加上。

範例：

.style 的寫法

如果對 CSS 熟悉，想操控個別 CSS 的話，就會使用到 .style 的語法，例：

var the_block = document.getElementById("the_block");
the_block.style.opacity = 0.2;
the_block.style.backgroundColor = "blue";
the_block.style["background-color"] = "blue";

範例：

一、正方形與圓形的切換

提供 html：

<button type="button" id="btn">按鈕</button>
<div class="img_block"><img src="https://picsum.photos/id/222/200/200"></div>

提供 CSS：

div.img_block{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  font-size: 0;
}
div.img_block > img{
  width: 100%;
}

參考作法：