如何使用.querySelectorAll選擇器定位.style屬性？

Question

我已經通過.querySelectorAll選擇一個特定的類：

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

我現在正在努力的目標，調整此元素的.style.visibility attribut，通過執行以下操作：

hit3.style.visibility = "visible"; 

然而，這導致錯誤：

Uncaught TypeError: Cannot set property 'visibility' of undefined 

如何針對特定.style上述.querySelectorAll選擇器？

Fiddle

Answer 1

querySelectorAll返回一個節點列表，以便您應該指定要更改元素的索引：如果你想改變所有元素的CSS

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

返回你應該遍歷他們見Johny's answer。

希望這會有所幫助。

Answer 2

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>