289753 - initial value of element.style.display is incorrect

Status: VERIFIED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Justin Ryan]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050408
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050408

I encountered this issue working on a skin for http://qutang.net, but don't
think this will be too tricky to reproduce.  Basically, I have a div whose
default style includes 'display: none'.  A link on the page toggles the
visibility of this div, using the following javascript function:

<script languge="javascript1.2" type="text/javascript">
// this will switch between hidden and visible styles
function softoggle(elem_id) {
  try {
    var elem = document.getElementById(elem_id);
    if ( elem.style.display == 'none' ) {
      elem.style.display = 'inline';
    } else {
      elem.style.display = 'none';
    }
  } catch (e) { errBack("softoggle() " + e); }
}
</script>

The first time this is run, nothing happens, because the value of
elem.style.display is '' or something nullish.  Shouldn't it reflect the state
of the element?

w3c recommendation:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

Reproducible: Always

Steps to Reproduce:
1. Load a page using my softoggle function, i.e. http://qutang.net/
2. Activate the function (on qutang, find a little pi symbol in upper left)
3. try it a few more times..

Actual Results:  
the first time, nothing happens, then behaviour is as expected.

Expected Results:  
elem.style.display should have been equal to 'none', and should have been
subsequently set to 'inline', displaying the hidden element.

I attempted to reverse the semantics of this code as such:
<script language="javascript1.2" type="text/javascript">
// this will switch between hidden and visible styles
function softoggle(elem_id) {
  try {
    var elem = document.getElementById(elem_id);
    if ( elem.style.display == '' ) {
      elem.style.display = 'none';
    } else {
      elem.style.display = '';
    }
  } catch (e) { errBack("softoggle() " + e); }
}
</script>

To no avail.

It occurred to me that perhaps '' is the default / initial value, so I changed
this again to set the style to 'inline' when it is ''.  This works correctly,
but keeps this code from being very modular / portable.

Is it not possible to check the current state of the style, not just whether or
not it has been manipulated via the dom?  It seems like my semantics are
correct, but I can't find specific documentation on the behaviour of this DOM api.

Comment 1

[Bob Clary [:bc] (inactive)]

elem.style.display returns the value set in the style attribute of the element.
It will not return the value cascaded from the style tag in the head of the
document. You need to use getComputedStyle. See
<http://www.mozilla.org/docs/dom/domref/examples7.html>

Comment 2

[Christian :Biesinger (don't email me, ping me on IRC)]

ah, right. see
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-htmlelementcss
"Inline style information attached to elements is exposed through the style
attribute. This represents the contents of the STYLE attribute for HTML elements"