原生 [JavaScript] 網頁程式設計：修改網頁元素的外觀

前言

CSS 本身是靜態的樣式 (style) 設置，但在網頁程式中也可以用 JavaScript 動態地設置網頁元素的樣式。

一般來說，用 JavaScript 設置網頁元素樣式的方式有兩種，一種是直接用程式動態設置樣式，一種是藉由動態增減網頁元素的 class 來修改網頁元素的樣式。對於少量的樣式，直接在程式中動態設置即可。但若樣式較多，則預先寫好 class 較佳。

使用 CSS 的 pseudo class 和 transform 等功能，已經可以在不寫 JavaScript 的前提下達到一些動態效果。如果能用 CSS 來完成的動態效果，就應優先用 CSS 來完成。

動態設置網頁元素的樣式表

藉由修改 HTMLElement.style 屬性內的樣式可動態地修改特定元素的樣式。動態修改的樣式會以行內樣式 (inline style) 的方式存在頁面上。參考下例：

let elems = document.getElementsByClassName('some-class');

Array.prototype.forEach.call(elems, function (elem) {
  elem.style.fontFamily = 'sans-serif';
});

要注意原本在 CSS 中的 font-family 屬性在 JavaScript 程式中會以 fontFamily 來呈現。

動態增減網頁元素的 class

藉由增減 Element.classList 串列的內容，可以動態地幫網頁元素增減特定 class 。當我們預先寫好一些樣式時，就可以透過這個方式來修改網頁元素的外觀。

假定我們已經寫好了 .some-style 的樣式，以下的程式可將選取的網頁元素加入該樣式。

let elems = document.getElementsByClassName('some-class');

Array.prototype.forEach.call(elems, function (elem) {
  elem.classList.add('some-style');
});

相對地，以下程式則可幫選取的網頁元素移除特定樣式：

let elems = document.getElementsByClassName('some-class');

Array.prototype.forEach.call(elems, function (elem) {
  elem.classList.remove('some-style');
});

取得特定標籤所有的樣式

使用 Window.getComputedStyle() 函式可以取得特定元素所有的樣式物件。取出的樣式物件再透過 CSSStyleDeclaration.getPropertyValue() 即可取出特定樣式的值。參考下例：

let elem = document.querySelector('.some-class');

let styles = window.getComputedStyle(elem, null);

/* List all styles of `elem` */
for (let s of styles) {
  if (styles.hasOwnProperty(s)) {
    console.log(`${s}: ${styles.getPropertyValue(s)}`);
  }
}

動態顯示或隱藏網頁元素

如果想要用 JavaScript 顯示或隱藏網頁元素，可透過修改網頁元素的 hidden 屬性來達成。

使用 Element.setAttribute() 函式可新增網頁元素的屬性。參考下例：

let elems = document.getElementsByClassName('some-class');

Array.prototype.forEach.call(elems, function (elem) {
  elem.setAttribute('hidden', true);
});

相對來說，使用 Element.removeAttribute() 函式則可移除網頁元素的屬性。參考下例：

let elems = document.getElementsByClassName('some-class');

Array.prototype.forEach.call(elems, function (elem) {
  elem.removeAttribute('hidden');
});

結語

在本文中，我們學到一些修改網頁元素外觀的方式，藉由搭配 CSS 設置，就可以讓網頁元素具有動態的效果。