開源技術教學文件網 修改網頁元素的外觀

最後修改日期為 NOV 28, 2019

前言

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 設置,就可以讓網頁元素具有動態的效果。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter