>我通过.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
?
小提琴
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>
>querySelectorAll
返回一个节点列表,因此您应该指定要更改的元素的索引:
hit3[0].style.visibility = "visible";
如果你想改变所有返回的元素的css,你应该遍历它们,看看Johny的答案。
希望这有帮助。