如何在具有特定樣式的 Javascript 數組中找到 HTML 元素？

Question

我正在制作一個帶有部分的網站。 基本上，您按下頁面底部的一個按鈕，它將顯示連接到該按鈕的 div。

因此，對於樣式，我只隱藏了四個部分並顯示了“home”部分：

.container-pages {
    display: none;
}

#home-page {
    display: block;
}

而 HTML 它只是部分和按鈕......

<!--sections-->
<div id="home-page" class="container-pages">
        <h1>HOME</h1>
    </div>
    <div id="start-page" class="container-pages">
        <h1>START</h1>
    </div>
    <div id="learn-page" class="container-pages">
        <h1>LEARN</h1>
    </div>
    <div id="contact-page" class="container-pages">
        <h1>CONTACT</h1>
    </div>
    
<!--buttons-->
    <div id="bottom-menu">
        <div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div>
        <div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div>
        <div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div>
        <div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div>
    </div>

現在 JavaScript：

// creating an array with the 4 html sections (pages):
const pages = [...document.getElementsByClassName('container-pages')];

 // creating an array with the 4 html sections (pages): const pages = [...document.getElementsByClassName('container-pages')];

 .container-pages { display: none; } #home-page { display: block; }

 <!--sections--> <div id="home-page" class="container-pages"> <h1>HOME</h1> </div> <div id="start-page" class="container-pages"> <h1>START</h1> </div> <div id="learn-page" class="container-pages"> <h1>LEARN</h1> </div> <div id="contact-page" class="container-pages"> <h1>CONTACT</h1> </div> <!--buttons--> <div id="bottom-menu"> <div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div> <div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div> <div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div> <div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div> </div>

那么如何過濾這個數組，它只使用具有display: block;樣式的<divs>來創建一個新數組。 ?

我試過了：

const currentSelection = pages.filter(div => div.style.display == 'block');

但是當我在控制台上記錄currentSelection時，我得到一個空數組。

對此的任何幫助都會很棒！

在此先感謝，Menmoe。

Answer 1

有幾種簡單的方法，其中一種是使用與您自己相同的方法，但要考慮到element.style.display === 'block'僅在display: block在內聯style屬性中設置時才匹配。 如果 styles 設置在樣式表或<style>元素中，那么我們必須改為使用window.getComputedStyle(element, state).propertyName來檢索應用於元素的計算/渲染屬性：

 // creating an array with the 4 html sections (pages): const pages = [...document.getElementsByClassName('container-pages')], // we use the Array.prototype.filter() method, along with an anonymous Arrow function // to test each element of the 'pages' Array, to retain only those elements whose // 'display' is exactly equal to 'block': visible = pages.filter((page) => window.getComputedStyle(page, null).display === 'block'), // here we do exactly the same, but we filter for those pages that are currently // set to 'display: none': hidden = pages.filter((page) => window.getComputedStyle(page, null).display === 'none'); console.log(visible, hidden);

 .container-pages { display: none; } #home-page { display: block; }

 <!--sections--> <div id="home-page" class="container-pages"> <h1>HOME</h1> </div> <div id="start-page" class="container-pages"> <h1>START</h1> </div> <div id="learn-page" class="container-pages"> <h1>LEARN</h1> </div> <div id="contact-page" class="container-pages"> <h1>CONTACT</h1> </div> <!--buttons--> <div id="bottom-menu"> <div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div> <div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div> <div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div> <div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div> </div>

雖然上述方法有效，但使用hidden屬性隱藏相關元素會更簡單：

 // creating an array with the 4 html sections (pages): const pages = [...document.getElementsByClassName('container-pages')], // we use the Array.prototype.filter() method, along with an anonymous Arrow function // to test each element of the 'pages' Array, to retain only those elements whose // 'hidden' property is set to false (and are therefore visible): visible = pages.filter((page) => page.hidden === false), // here we do exactly the same, but we filter for those pages whose 'hidden' // property is equal to true, and are therefore hidden: hidden = pages.filter((page) => page.hidden === true); console.log(visible, hidden);

 <!--sections--> <div id="home-page" class="container-pages"> <h1>HOME</h1> </div> <div id="start-page" class="container-pages" hidden> <h1>START</h1> </div> <div id="learn-page" class="container-pages" hidden> <h1>LEARN</h1> </div> <div id="contact-page" class="container-pages" hidden> <h1>CONTACT</h1> </div> <!--buttons--> <div id="bottom-menu"> <div class="bottom-buttons bottom-menu-items" id="home-button">HOME</div> <div class="bottom-buttons bottom-menu-items" id="start-button">START A PROJECT</div> <div class="bottom-buttons bottom-menu-items" id="learn-button">LEARN</div> <div class="bottom-buttons bottom-menu-items" id="contact-button">CONTACT US</div> </div>

• Array.prototype.filter() 。
• 箭頭函數。
• window.getComputedStyle() 。