visibility: hidden not properly detected in javascript

Question

In CSS, setting a visibility attribute to hidden for a class, then getElementsByClassName[i].style.visibility, will not recognize the class as hidden.

Example

Only after the onChange executes for the second time does the css actually change. The first onChange call does not recognize the css is set to visibility: hidden, and the else applies the "hidden" attribute.

To prove this, when else is replaced with else if, the visibility will never change, as it's not read as visible or hidden

Fiddle -1

However, if I use style.visibility != "hidden" and style.visibility != "visible" the code will work properly.

Fiddle -2

Can anyone enlighten me as to why this happens, and how I can properly set attributes to be read by js?

`.style` only affects inline styles. You're looking for [`window.getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). — Siguza, Aug 01 '16 at 20:19
This answer may be helpful to you. http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript/196038#196038 — colecmc, Aug 01 '16 at 20:24
It's highly recommended that you include the necessary code in the question rather link to it as an external resource... — War10ck, Aug 01 '16 at 20:24
@Siguza Can that be used with getElementsByClassName? I tried using that and every index showed as undefined when I did var elem = document.getElementsByClassName(toggle_class); for(var i = 0; i < elarray.length; i++) {var style = window.getComputedStyle(elem[i], null); //toggle visibility here } — Torpid, Aug 01 '16 at 21:01
And I'm fairly new to this Siguza, and using an onclick within the ' — Torpid, Aug 01 '16 at 21:03
@Torpid Yes, it can be used on any DOM node. If you're trying that with the code from your fiddle, then please note that the actual problem there is that the loop never executes, because `getElementsByClassName` returns an empty list, because no element there has `class="new_format"` set. Also note that "Fiddle -1" and "Fiddle -2" are broken, because there is no such thing as `else(condition)`, only `else if(condition)` or `else`. — Siguza, Aug 01 '16 at 21:32
@Siguza Ah, I did forget the if. The fiddles were only for the onChange, and I was aware that I didn't include the new format code. Thanks for the clarification, and I did manage to get it to work with getElementsByClassName. If you'd like to add the window.getComputedStyle() as an answer I'll mark it as correct. Thanks for all your help! — Torpid, Aug 01 '16 at 21:45

score 1 · Accepted Answer · answered Aug 01 '16 at 22:00

element.style will only return inline styles, i.e. the ones defined in the element's style="..." attribute.
To get computed styles, use 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>

visibility: hidden not properly detected in javascript

1 Answers1