访问 collapse:not(.show) { display: none; 的值}答案

【问题标题】：accessing value of collapse:not(.show) { display: none; }访问 collapse:not(.show) { display: none; 的值}
【发布时间】：2021-04-26 18:18:49
【问题描述】：

我正在尝试使用getElementsByClassName 来获取display 样式的值：

.collapse:not(.show) { 
  display: none; 
}

我的代码是：

document.getElementById("whatever").getElementsByClassName("collapse:not(.show)");

这不起作用。我想要的结果是返回none。我能做什么？

【问题讨论】：

getElementsByClassName 采用类名，而不是选择器。使用querySelectorAll 或querySelector 来查询选择器...

标签： twitter-bootstrap vue.js vuejs2 getelementsbyclassname

【解决方案1】：

Document.getElementsByClassName() 在文档中查询具有指定类名的元素，但您提供了类名以及selector 的一部分（即collapse 是类名称，:not(.show) 是 CSS 选择器）。

您可以通过以下方式获得这些元素的 display 样式：

使用Document.querySelectorAll()查询文档中匹配给定选择器的所有元素。
使用window.getComputedStyle() 获取每个元素的计算样式，返回CSSStyleDeclaration。
使用CSSStyleDeclaration.getPropertyValue() 获取display 样式的值。

const elems = document.querySelectorAll('.collapse:not(.show)') //  1️⃣
for (const elem of elems) {
  const styles = window.getComputedStyle(elem) // 2️⃣
  const display = styles.getPropertyValue('display') // 3️⃣
  console.log(elem, { display })
}

.collapse:not(.show) {
  display: none;
}

<ul>
  <li class="collapse">Item 1</li>
  <li class="collapse show">Item 2</li>
  <li class="collapse">Item 3</li>
  <li class="collapse show">Item 4</li>
</ul>

【讨论】：