getAttribute won't get a display attribute

JavaScript
1

I want to find out if an element has been hidden by setting display to ‘none’.

When it has been hidden, I find “display: ‘none’” in the firebug display, as expected.

If I print the attribute list with


if (b2=='i1N1g1')
{   for (var i=0;  i<document.getElementById(b2).attributes.length;
 i++ )
{console.log(
document.getElementById(b2).attributes[i].name+":"+document.getElementById(b2).attribute//s[i].value+"\
");
}}

I get “display:none” on the list when the element is hidden.

HOWEVER: when I use


console.log(document.getElementById(b2).getAttribute('display')

I keep getting a return value of "null!

And the test


if(document.getElementById(b2).getAttribute('display')=="none") {return};

fails to fire.

Does anyone have any idea why the loop finds the attribute but the getAttribute doesn’t?

2

I’m not sure what the problem is however I am fairly certain that you are trying to read a style property with getAttribute

Reading style properties in Javascript is very tough to do because every browser handles them in a different way. The incompatibilities are very annoying, even between Firefox and Chrome.

That said, setting style properties (like “display”) is very consistent. My recommendation would be to maintain a variable in javascript and use it set the display style as opposed to trying to read the display style and then set it based upon the value that was read.

best of luck
Floater

3

The loop isn’t finding an attribute, it’s finding the value of an attribute. In this case, it’s the value of the style attribute:

style="display:none"

This part of your code gets the value of each attribute. One of these attributes will be the style attribute.

document.getElementById(b2).attributes[i].value

“display” isn’t an attribute. It’s a CSS property. CSS properties can be placed into the style attribute (called “inline styles”). They can also be set with JavaScript via the style object, which controls the style attribute in the HTML. It’s important to note that using JavaScript you have to use a camelCase syntax instead of using hyphens. This applies to things like background-color (backgroundColor in JS) and margin-left (marginLeft in JS) but obviously not for things like position and display, which makes things less complicated.

So it you want to find if something is hidden:

if (document.getElementById('foo').style.display === 'none') {
  // foo is hidden
}

What do you mean? The only incompatibilities I can think of are styleFloat in IE and cssFloat in the others.

4

That is the only one there is - everything else is the same across all browsers (as long as you avoid using getAttribute).

I think the only reason for that incompatibility is a difference of opinion on how to get around float being a reserved word although they managed to agree how to get around class and for being reserved words by agreeing on className and htmlFor so I don’t really know why they had a difference of opinion on one of the three JavaScript reserved words that match to HTML/CSS attributes/properties.

5

Once again, a little communication and forgoing stupid egotism would have saved web developers another headache.

6

Raffles:

Bingo! That works perfectly!

Now, knowing the answer, I tried once again to find it in my references to see why I couldn’t find it myself.

I still couldn’t find it anywhere in Flanagan’s “Definitive Guide”! But there WAS an example way in the back of Goodman’ Bible, that used it.

I think YOU should write a book! <G>

Many thanks!

7

Raffles,

Thank you for the clarification. I have had difficulties in reading CSS styles in the past attributed those problems to incompatibilities. At the time my code looked okay and worked with everything but Chrome.

Perhaps I should look at that issue again…

cheers,
floater