Visibility values defined in CSS not showing in Javascript

Question

The following code produces the result one would expect:

<script>
function Show_Visibility(){
    p = document.getElementById("i_button_2");
    alert(p.style.visibility);
}
</script>

<INPUT TYPE = "button"   id = "i_button_1"  value = "This is Button 1"   onclick="Show_Visibility()">
<br>
<INPUT TYPE = "button"   id = "i_button_2"  value = "This is Button 2">

<script>
p = document.getElementById("i_button_2");
p.style.visibility = "hidden";
</script>

However if we define the visibility of button 2 as hidden in CSS, the button is indeed hidden when the page is loaded, but the Javascript alert message is blank.

#i_button_2{visibility: hidden;}

<script>
function Show_Visibility(){
    p = document.getElementById("i_button_2");
    alert(p.style.visibility);  
}
</script>

<INPUT TYPE = "button"   id = "i_button_1"  value = "This is Button 1"   onclick="Show_Visibility()">
<br>        
<INPUT TYPE = "button"   id = "i_button_2"  value = "This is Button 2">

Why is this happening?

developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…

C3roe
– C3roe

2015-03-13 02:01:10 +00:00
Commented Mar 13, 2015 at 2:01 — C3roe
– C3roe, Commented Mar 13, 2015 at 2:01

lxe · Accepted Answer · 2015-03-13 01:17:32Z

2

You should use getComputedStyle to get the styles applied via stylesheets:

alert(getComputedStyle(p).visibility);

From the MDN article:

The object returned from getComputedStyle is read-only and can be used to inspect the element's style (including those set by a element or an external stylesheet). The elt.style object should be used to set styles on a specific element.

answered Mar 13, 2015 at 1:17

lxe

7,7772 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Visibility values defined in CSS not showing in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related