Determining current state of style.display and toggling it

[Tristan Miller]

Greetings.

I am trying to write a function which toggles the display of a certain
class of <div> elements in an HTML page. The CSS file initially sets some
classes to "display: none", and others to "display: block". The problem I
am encountering is that when the JavaScript interpreter starts up
initially, all style.displays are null. Thus the following code is not
effective:

function toggleAll(itemname) {
tmp = document.getElementsByTagName('div');
for (i = 0; i < tmp.length; i++) {
if (tmp[i].className == itemname) {
if (tmp[i].style.display == 'none')
tmp[i].style.display = 'block';
else
if (tmp[i].style.display == 'block')
tmp[i].style.display = 'none';
}
}
}

In the CSS file:
..foo { display: block; }
..bar { display: none; }

In the HTML file:
<a href="#" onclick="toggleAll('foo')">Show/hide foos</a>
<a href="#" onclick="toggleAll('bar')">Show/hide bars</a>
I can change the second innermost if statement to the following:

if (tmp[i].style.display == 'block' || tmp[i].style.display == '')

but this doesn't work either, since the bar class is initially hidden; the
user then needs to click the "Show/hide bars" link twice before the bars
toggle.

So I guess what I need is to query the current state of
tmp[i].style.display to see if it's "none" or "block". How do I do this?

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you

[Michael Winter]

Tristan Miller wrote:

The CSS file initially sets some classes to "display: none", and
others to "display: block".
If this document is to be placed on the Web, you should avoid doing
that. If a user agent doesn't provide the necessary support to show
that data, the user will be unable to see the content. Instead, you
should hide the content via scripting.
The problem I am encountering is that when the JavaScript
interpreter starts up initially, all style.displays are null.
In this case, yes, but not as a rule. The style object reflects inline
styling. That is, style data applied either through the style object
itself, or via the HTML style attribute.

[snip]
So I guess what I need is to query the current state of
tmp[i].style.display to see if it's "none" or "block". How do I do
this?

You have two options:

1) Follow the advice I gave previously. If you hide the content via
scripting, you can be sure that 'none' means hidden and '' (an empty
string) means visible.
2) Obtain the computed style for an element[1]. This will reflect the
value of a CSS property no matter how it was applied.

var getComputedValue = (function(v) {
if(v && v.getComputedStyle) {
return function(e, p, pE) {
return v.getComputedStyle(e, pE || null)[p];
};
} else {
v = null;
return function(e, p) {
if(e && e.currentStyle) {return e.currentStyle[p];}
};
}
})(document.defaultView);

if('block' == getComputedValue(myDiv, 'display')) {
/* ... */
}

Hope that helps,
Mike
[1] It should be noted that whilst IE does provide a proprietary
method of obtaining this information, it is deficient; values aren't
calculated and are returned literally.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.