Sichtbarkeit: versteckt nicht richtig erfaßt Javascript

Question

In CSS, ein Sichtbarkeitsattribut Einstellung für eine Klasse versteckt, dann getElementsByClassName [i] .style.visibility, wird die Klasse nicht als versteckt erkennen.

Example

Erst nach dem onChange zum zweiten Mal ausgeführt wird tatsächlich die CSS ändern. Der erste OnChange-Aufruf erkennt nicht, dass die CSS auf visibility: hidden festgelegt ist, und die Else wendet das Attribut "hidden" an.

Um dies zu beweisen, wenn sonst mit anderen ersetzt, wenn, wird nie die Sichtbarkeit ändern, da es nicht so sichtbar oder

Fiddle -1

jedoch versteckt ist zu lesen, wenn ich style.visibility != "hidden" and style.visibility != "visible" der Code verwenden, funktioniert einwandfrei .

Fiddle -2

Kann jemand mich aufklären, warum dies geschieht und wie ich richtig einstellen können Attribute von js gelesen werden?

Answer 1

element.style werden nur Inline-Stile zurückgegeben, d. H. Die im Attribut style="..." des Elements definierten. window.getComputedStyle(element)
Um berechnete Arten zu erhalten, verwenden:

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>