面试题：JavaScript批量控制一组元素基于CSS的显示隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <button id="toggleButton">切换显示状态</button>
  <div class="toggleable">元素1</div>
  <div class="toggleable">元素2</div>
  <div class="toggleable">元素3</div>

  <style>
   .toggleable {
      display: block;
      margin: 10px;
    }
  </style>

  <script>
    document.getElementById('toggleButton').addEventListener('click', function () {
      const toggleableElements = document.querySelectorAll('.toggleable');
      // 批量获取所有元素的初始显示状态
      const initialStates = [];
      toggleableElements.forEach((element) => {
        initialStates.push(window.getComputedStyle(element).display === 'block');
      });
      // 确定最终的显示状态
      const shouldShow = initialStates.every(state => state === false);
      toggleableElements.forEach((element) => {
        element.style.display = shouldShow? 'block' : 'none';
      });
    });
  </script>

</body>

</html>

上述代码首先获取页面上所有 class 为 toggleable 的元素，在点击按钮时，先批量获取这些元素的初始显示状态，判断是否所有元素都处于隐藏状态，然后根据判断结果统一设置它们的 display 属性，这种方式能较好地应对元素数量较多的情况，提高性能。

获取按钮及元素：通过 document.getElementById 获取按钮元素，并为其添加点击事件监听器。通过 document.querySelectorAll 获取所有 class 为 toggleable 的元素。
获取初始状态：遍历所有 toggleable 元素，使用 window.getComputedStyle 获取每个元素当前实际的 display 计算值，并判断是否为 block，存储到 initialStates 数组中。
确定最终状态：使用 every 方法判断 initialStates 数组中是否所有元素都为 false（即所有元素当前都隐藏），如果是，则最终应显示所有元素；否则应隐藏所有元素。
切换显示状态：再次遍历 toggleable 元素，根据确定的最终状态设置每个元素的 display 属性为 block 或 none。

星途面试题库

面试题：JavaScript批量控制一组元素基于CSS的显示隐藏

知识考点

面试题答案