twitter-bootstrap - 访问 collapse:not(.show) { display: none; 的值 }

Question

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

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

我的代码是：

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

这没有用。我想要的结果是回来none。我能做些什么？

标签： twitter-bootstrapvue.jsvuejs2getelementsbyclassname

Answer 1

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

以下是如何获得display这些元素的样式：

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

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>