如何使用 .querySelector 选择器定位 .style 属性？答案

【问题标题】：How to target .style attribut with .querySelectorAll selector?如何使用 .querySelector 选择器定位 .style 属性？
【发布时间】：2016-06-06 17:16:03
【问题描述】：

我通过.querySelectorAll选择了一个特定的班级：

var hit3 = document.querySelectorAll(".lattern.hit-3 .circle");

我现在正在尝试通过执行以下操作来定位和调整此元素的 .style.visibility 属性：

hit3.style.visibility = "visible";

然而这会导致错误：

Uncaught TypeError: Cannot set property 'visibility' of undefined

如何使用上述.querySelectorAll 选择器定位特定的.style？

Fiddle

【问题讨论】：

querySelectorAll 返回一个节点列表...所以你需要遍历它

标签： javascript css selectors-api

【解决方案1】：

querySelectorAll 返回一个类似结构（NodeList）的数组，它没有style 属性。

但我认为您需要的略有不同，我假设想要为点击的元素显示圆圈

var latternElement = document.querySelectorAll('.lattern');

function toggleElement(el) {
  el.querySelector('.circle').classList.add('visible'); //also minor tweaks, use css rules
}

for (var i = 0; i < latternElement.length; i++) {
  latternElement[i].addEventListener('click', function(event) {
    if (this.classList.contains("hit-3")) { //minor tweaks - only supported in modern browsers
      toggleElement(this);
    }
  });
}

.lattern {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: red;
  margin: 0 0 10px 0;
  cursor: pointer;
}
.circle {
  position: relative;
  top: 20px;
  left: 20px;
  border-radius: 50% 50%;
  width: 16px;
  height: 16px;
  background-color: green;
  visibility: hidden;
}
.circle.default,
.circle.visible {
  visibility: visible;
}

<div class="lattern hit-1">
  <div class="circle"></div>
</div>
<div class="lattern hit-2">
  <div class="circle default"></div>
</div>
<div class="lattern hit-3">
  <div class="circle"></div>
  click me
</div>

【讨论】：

【解决方案2】：

querySelectorAll 返回一个节点列表，因此您应该指定要更改的元素的索引：

hit3[0].style.visibility = "visible";

如果你想改变返回的所有元素的 css，你应该遍历它们，参见Johny's answer。

希望这会有所帮助。

【讨论】：