如何使用 JavaScript 隱藏和顯示 DOM 元素

在原生 JavaScript 中有多種顯示或隱藏 DOM 元素的方法。在本文中，我們將研究使用 JavaScript 隱藏或顯示 DOM 元素的兩種不同方法。

使用風格display 屬性

樣式 display 屬性用於在 JavaScript 中設置和獲取元素的顯示類型。

大多數 HTML 元素都有 inline 或阻止 顯示類型。內聯元素的內容 浮動 在它的左右兩側。塊 HTML 元素是不同的，因為它們 * 填充 * 整行，並且不會在其兩側顯示內容。

要隱藏元素，請設置 display none 的屬性 ：

document.querySelector('.btn').style.display = 'none';

要顯示一個元素，設置 display block 的屬性 （或除 none 之外的任何其他值 ):

document.querySelector('.btn').style.display = 'block';

使用風格visibility 屬性

在 JavaScript 中顯示或隱藏 DOM 元素的另一種方法是使用樣式 visibility 財產。類似於上面的display 財產。但是，如果您設置 display: none , 它對 DOM 隱藏整個元素，而 visibility:hidden 隱藏元素的內容，但元素保持原來的位置和大小。

要隱藏元素，請設置 visibility hidden 的屬性 ：

document.querySelector('.btn').style.visibility = 'hidden';

要再次顯示元素，只需設置 visibility visible 的屬性 如下：

document.querySelector('.btn').style.visibility = 'visible';

樣式 visibility 屬性僅隱藏元素，但不會刪除元素佔用的空間。如果你也想刪除空格，你必須設置 display: none 使用 display 屬性。

創建 show() 和 hide() 方法

jQuery 提供 hide() , show() , 和 toggle() 使用內聯樣式更新 display 的實用方法 元素的屬性。

讓我們使用 style 在 vanilla JavaScript 中創建上述 jQuery 方法的屬性：

// hide an element
const hide = (elem) => {
    elem.style.display = 'none';
}

// show an element
const show = (elem) => {
    elem.style.display = 'block';
}

// toggle the element visibility
const toggle = (elem) => {
    
    // if the element is visible, hide it
    if(window.getComputedStyle(elem).display !== 'none') {
        hide(elem);
        return;
    }

    // show the element
    show(elem);
}

現在要隱藏或顯示任何 DOM 元素，只需使用上述方法，如下所示：

// hide element
hide(document.querySelector('.btn'));

// show element
show(document.querySelector('.btn'));

// toggle visibility
toggle(document.querySelector('.btn'));

注意 getComputedStyle() 的使用 方法，我們前幾天剛學的，檢查一個元素是否已經可見。

我們使用這種方法是因為 style 屬性只有 處理使用元素的 style 指定的內聯樣式 屬性。但是可以通過嵌入的 <style> 隱藏元素 元素甚至是外部樣式表。 getComputedStyle() 方法返回用於呈現 HTML 元素的實際 CSS 樣式，無論這些樣式是如何定義的。

另一件需要注意的是 getComputedStyle(elem).display !== 'none' 陳述。我們不檢查顯示類型是否為 block 因為 block 不是唯一 顯示元素的方式。你可以使用 flex , inline-block , grid , table 等對於 display 屬性來顯示一個元素。但是，要隱藏一個元素，只有一個值，即 display: none .

如果您更喜歡使用 CSS 類 要隱藏和顯示 DOM 元素而不是內聯樣式，請查看本指南。