时间戳

首页 > 解决方案 > nextElementSibling 未捕获 CSS 样式

javascript - nextElementSibling 未捕获 CSS 样式

问题描述

我有一个应该打开/关闭可折叠按钮的按钮，divHTML 如下所示：

<div class='outer-collapsible'>
  <button type='button' class='collapsible'>Targets and Victims</button>
  <div class='content'>
    <p>Lorem ipsum...</p>
  </div>
</div>

当我选择所有班级button时collapsible，我正在尝试使用nextElementSibling这样的选择<div class='content'>：

let collapsibles = document.querySelectorAll('.collapsible');

for (let i = 0; i < collapsibles.length; i++) {
  if (collapsibles[i].nextElementSibling.style.display == 'block') {
    // do something
  }
}

但是虽然nextElementSibling选择了div，但没有检测到我的 CSS 文件中的样式属性。nextElementSibling只检测内联样式？我确信我可以想到其他方法来实现这一点，但我想知道为什么nextElementSibling选择了正确的元素但没有正确检测到样式？

编辑：

CSS

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1fff8;
}

标签： javascripthtmlcss

解决方案

这不是问题nextElementSibling，而是首先如何检测 CSS 样式的问题。

.style只能用于读取style属性的内容，例如<div style="color: red"></div>.

为了阅读“实际”样式，您可能需要.getComputedStyle()。

推荐阅读