видимость: скрытый не правильно обнаружен в JavaScript

Question

В CSS, установив атрибут видимость скрытый для класса, то getElementsByClassName [I] .style.visibility, не распознает класс, как скрытой.

Example

Только после того, как OnChange выполняется во второй раз на самом деле изменить CSS. Первый вызов onChange не распознает, что css установлен в visibility: hidden, а else применяет атрибут «скрытый».

Чтобы доказать это, когда еще заменяется другой, если видимость не изменится, так как она не читается как видимыми или скрытыми

Fiddle -1

Однако, если я использую style.visibility != "hidden" and style.visibility != "visible" код будет работать правильно ,

Fiddle -2

Может кто-нибудь просветить меня, почему это происходит, и как я могу правильно установить атрибуты для чтения JS?

Answer 1

element.style будет возвращать только встроенные стили, то есть те, которые определены в атрибуте элемента style="...".
Чтобы получить вычисляемых стили, используйте window.getComputedStyle(element):

var inline = document.getElementById('inline'), 
 
    computed = document.getElementById('computed'), 
 
    derp = document.querySelector('.derp'); 
 
document.getElementById('getval').addEventListener('click', function() 
 
{ 
 
    inline.textContent = derp.style.visibility; 
 
    computed.textContent = getComputedStyle(derp).visibility; 
 
}) 
 
document.getElementById('toggle').addEventListener('click', function() 
 
{ 
 
    derp.style.visibility = getComputedStyle(derp).visibility == 'visible' ? 'hidden' : 'visible'; 
 
})

.derp 
 
{ 
 
    visibility: visible; 
 
    background: #CFC; 
 
    height: 50px; 
 
}

<div class="derp"></div> 
 
Inline value: <span id="inline"></span><br> 
 
Computed value: <span id="computed"></span><br> 
 
<button id="getval">Get visibility</button> <button id="toggle">Toggle div visibility</button>