ansaurus

Question

How to retrieve the display property of a DOM element?

Answer 1

+3 A:

The .style.* properties map directly onto the style attribute, not to the applied style. For that you want getComputedStyle.

I'd give serious consideration to toggling .className and separating the presentation from the logic entirely.

David Dorward 2010-09-23 12:30:22

style should not be called an attribute. It is an object. Each DOM element node has a style property. This property is an object. ... The HTML style attribute is used to add properties to the style property of the DOM node that represents the HTML element. Once the HTML code is parsed, we do not have HTML attributes anymore, but object properties.

Šime Vidas 2010-09-23 12:34:29

@Šime Vidas: I think if you re-read David's answer, you'll realize he's drawn that distinction correctly.

T.J. Crowder 2010-09-23 12:35:53

@David Dorward: Thanks for your help. So what's the usage of `style` attribute since it could not mirror the real-time change of the CSS style?

Jichao 2010-09-23 12:36:51

@jcyang: The `style` object on the element in the DOM is for changing the style applied to that *specific element*, just like the `style` attribute in markup. If you want to modify the style definition in the stylesheet, you can do that, it's just elsewhere: https://developer.mozilla.org/En/DOM/Stylesheet

T.J. Crowder 2010-09-23 12:38:48

The style attribute exists before HTML parsing. Once the page is parsed, there is no style attribute anymore. The style object may be manipulated upon and then it will no longer "map" to the original style attribute of the HTML source code.

Šime Vidas 2010-09-23 12:39:13

@Šime Vidas: *"Once the HTML code is parsed, we do not have HTML attributes anymore, but object properties."* Actually, the attributes become DOM attributes -- specifically, [attribute nodes](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1841493061). The correct terminology is that these properties on the `style` object *reflect* the "style" attribute (just as `className` reflects the "class" attribute).

T.J. Crowder 2010-09-23 12:43:57

Those attribute nodes are properties, not attributes. In the object model of the browser there exist only properties. These properties can be objects or primitive values. Each DOM node (regardless of type) is a property. The HTML style attribute is used to set up the initial style object of the DOM element. (btw, in JavaScript terminology, attributes are a completely different thing - they are meta-information bound to each property. These attributes define if the property is for example read-only)

Šime Vidas 2010-09-23 12:51:00

@David Dorward: So `style` attribute/object is only for changing and the computed style/currentStyle is for viewing?

Jichao 2010-09-23 12:51:53

Changes done to the style property are of course viewable, too.

Šime Vidas 2010-09-23 12:56:33

@Sime Vidas: Thanks. It is true that the changes are viewable. I have tested it.

Jichao 2010-09-23 13:10:03

Answer 2

+1 A:

You need the computed value of the display property for the element. You can get this as follows. Note that most browsers support window.getComputedStyle() whereas the nearest equivalent in IE is the element's currentStyle property:

var el = document.getElementById('a');
var styleObj;

if (typeof window.getComputedStyle != "undefined") {
    styleObj = window.getComputedStyle(el, null);
} else if (el.currentStyle != "undefined") {
    styleObj = el.currentStyle;
}

if (styleObj) {
   alert(styleObj.display);
}

Tim Down 2010-09-23 12:38:37

Answer 3

A:

If you can use jQuery, there is a method called .is

To check if something isn't displayed, I'd do ... $('someSelector').is('hidden') ...

This would return false if display attribute is set to None.

vikp 2010-09-23 12:40:20

Answer 4

A:

I'd recommend using a JavaScript library for getting computed style. For example, using jQuery you can retrieve computed style with the css() method...

$("#a").css("display");

The css() method is a cross-browser solution as it internally uses the style object and both the getComputedStyle method and the currentStyle object.

Šime Vidas 2010-09-23 16:30:00

ansaurus

tags:

views:

answers:

How to retrieve the display property of a DOM element?

related questions