Problem with CSS property visibility from Javascript

Question

In the code below, the CSS display element is not being read by the Javascript and I don't understand why. After putting in a debugger statement I saw display was empty even though I set it in the CSS. I've been staring at it for a while, so I'm probably missing something obvious.

<html>
<head>
<style type="text/css">
    div#image{ display: none; }
    div#url { display: none; }
</style>
<script type="text/javascript">
    function toggleVisibility(id) {
    debugger;
        var imageStyle = document.getElementById('image').style;
        var urlStyle = document.getElementById('url').style;
        alert(document.getElementById("image").style.display); // debug for stack
        if ( id == "image" ) {
            if ( imageStyle.display == "none" ) {
                imageStyle.display = "block";
                urlStyle.display = "none";
            }
        }

        if ( id == "url" ) {
            if ( urlStyle.display == "none" ) {
                urlStyle.display = "block";
                imageStyle.display = "none";
            }
        }
    }
</script>
</head>
<body>
    <form method="post" action="create.php">
        <input type="hidden" name="formType" value="create">
        <input type="radio" name="type" value="image" onClick="toggleVisibility('image');"> Image <input type="radio" name="type" value="url" onClick="toggleVisibility('url');"> URL
        <div id="image">
            Image div
        </div>
        <div id="url">
            URL div
        </div>
    </form>
</body>
</html>

I believe javascript only can read the style tags on the element, not the css tags — Ryan Matthews
– Ryan Matthews, Commented Aug 11, 2011 at 15:07

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Demo

You can't read css styles of attributes like that but an alternative is to check for an empty value and treat it like display:none

    if ( id == "image" ) {
        if ( imageStyle.display == "none" || !imageStyle.display) {
            imageStyle.display = "block";
            urlStyle.display = "none";
        }
    }

    if ( id == "url" ) {
        if ( urlStyle.display == "none" || !urlStyle.display) {
            urlStyle.display = "block";
            imageStyle.display = "none";
        }
    }

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 11, 2011 at 15:09

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

7 Comments

anjunatl Over a year ago

This makes sense. =) Stack won't let me accept the answer for a bit, but I will. Thanks!

T.J. Crowder Over a year ago

"...check for an empty value and treat it like display:none" An empty value on most elements should be treated as display: block or display: inline, not display: none.

Joseph Marikle Over a year ago

@TJCrowder I actually disagree. A visible element will be either inline or block typically. but invisible elements by the display property will always be set to none. Basically, treating the blank value as inline only covers roughly half the elements.

Joseph Marikle Over a year ago

@anjunatl np :) glad to help.

T.J. Crowder Over a year ago

The .style.display property on the actual element doesn't tell you whether a stylesheet is hiding it at all, you can't "check for an empty value" and make any kind of assumption about whether the element is visible. For example, both of the div elements in this example page report .style.display is "", but one of them is visible and the other isn't. All the .style.display property tells you is whether there's an inline style on the element. That's it, it doesn't apply to the OP's sample at all, which uses a stylesheet.

|

Tomgrohl · Accepted Answer · 2011-08-11 15:28:37Z

1

That's because you need to get the computed style of the element.

You can do that using this function:

function getStyle( elem, name ) {
    var value;

    if (elem.currentStyle) {
        value = elem.currentStyle[name];
    } else if (window.getComputedStyle) {
        value = document.defaultView.getComputedStyle(elem,null).getPropertyValue(name);
    }
    return value;       
}

I've also simplified part of your JS, so you probably wouldn't need to check the style of the element anyway:

if ( id == "image" ) {
    imageStyle.display = "block";
    urlStyle.display = "none";
}

if ( id == "url" ) {
   urlStyle.display = "block";
   imageStyle.display = "none";
}

Demo here

answered Aug 11, 2011 at 15:28

Tomgrohl

1,75710 silver badges16 bronze badges

1 Comment

anjunatl Over a year ago

I knew something felt off/unnecessary in that block. Today's got a Monday-vibe to it. Thanks. :)

Alex · Accepted Answer · 2011-08-11 15:09:53Z

0

JavaScript doesn't natively read styles from elements as set in a style sheet. I think JQuery and other libraries do. In order to get this to work you could et the style attribute on the actual tag itself:

<div id="image" style="display:none">
    Image div
</div>
<div id="url" style="display:none">
    URL div
</div>

Or, check for an empty value and use that as "none"

answered Aug 11, 2011 at 15:09

Alex

7,3461 gold badge21 silver badges31 bronze badges

1 Comment

anjunatl Over a year ago

You're right, I was confusing it with JQuery's functionality. I'd just use JQuery here but that's a large library and I don't have a need for it on this tiny project. Thanks!

T.J. Crowder · Accepted Answer · 2011-08-11 15:14:44Z

The style property on HTMLElement instances only reflects the information for the inline styles for that element (e.g., the style attribute on the tag). To get the computed style of an element, which includes any applied by CSS rules, you have to use getComputedStyle (on browsers that support it) or currentStyle (on browsers that support it).

Slightly off-topic: Reliably getting the computed style for an element is one of the (many) areas where a good JavaScript library can save you a lot of time and trouble, whether it's jQuery, Prototype, YUI, Closure, or any of several others. It's not just the getComputedStyle / currentStyle dichotomy, but various browser quirks as well. Using a good library, you can leverage the huge amount of work and research others have done, so you can concentrate on your specific work. Usually. :-)

For instance, using jQuery you could find out whether the element with the id "image" was visible (which can be affected by display: none, visibility: hidden, etc.) like this:

if ($("#image").visible()) {
    // Yes it is
}

Or if you want to check a specific computed style:

if ($("#image").css("display") === "none") {
    // It has display: none, either directly or by rule
}

Other libraries will have similar functionality.

Collectives™ on Stack Overflow

Problem with CSS property visibility from Javascript

4 Answers 4

Demo

7 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related