如何在具有特定样式的 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>

那么我如何过滤这个数组，它只用 <divs> 的样式创建一个新数组 display: block; ？

我试过了：

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

但是当我在控制台上登录 currentSelection 时，我得到一个空数组。

在这方面的任何帮助都会很棒！

提前致谢， 门萌。

Answer 1

有几种简单的方法，其中一种是使用与您自己相同的方法，但要考虑到 element.style.display === 'block' 将仅匹配 如果 display: block 设置在内联 @ 987654326@ 属性。如果样式是在样式表或<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()。
• Arrow functions。
• window.getComputedStyle()。