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

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    前言

    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 Email
    【追蹤新文章】
    Facebook Twitter Plurk