Как настроить атрибут .style с помощью .querySelectorВсе селектор?

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 Возвращает список узлов, так что вы должны указать индекс элемента, который вы хотите изменить:

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

Если вы хотите изменить CSS всех элементов возвращается вы должны проходным их, см. 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>