I wanted to change a CSS value using JavaScript…

…but it did not work in browsers other than Firefox. I looked at my code, it seemed to be okey. I couldn’t use Firebug, since the script worked in Firefox.

After a bit longer looking at my code I found the problem. I used a semicolon inside the string for the CSS. It looked a bit like this: elm.style.display = "none;";. After deleting the semicolon it all worked as intended. A bit weird you cannot use it in this kind of statements, but can when you use the cssText property. And also since you must use it in CSS too.

I made a page in my codex that illustrates the problem. In Firefox it works like expected. IE6 and IE7 both do absolutely nothing useful (they give errors) and other browsers make the text white, but the background not black.

Posted on Monday, September 3rd, 2007 in JavaScript
Comments and trackbacks are welcome.

20 responses to I wanted to change a CSS value using JavaScript…

I get the impression that this is more a sort of lenience given by Firefox rather than a bug in other browsers.

You see, in CSS the semicolon is used as a line-delimiter, a way to let the parser know that it reached the end of this particular ‘line’ of css.

That means that the semicolon isn’t part of the value. So, when you are assigning a value to a css attribute, you do so without a delimiter.

csstext is different because it takes a string, and puts it through a css parser, much like the style attribute.
Kilian Valkhof said on September 3rd, 2007.
I also thought it had something to do with that. But why does Firefox allow it, and others not? If I search on specific Firefox and Mozilla terms I can’t find anything about this.

Maybe that’s because other web developers are not as dumb as me, and automatically not-use the semicolon :P
Arjan Eising said on September 3rd, 2007.
the javascript parser in firefox is much more lenient than the javascript parser in, say, IE. I don’t know why (I’m sure someone does, though :P)
Kilian Valkhof said on September 3rd, 2007.
I think that someone doesn’t read my blog :)
Arjan Eising said on September 3rd, 2007.
It’s a bug in Mozilla which has been fixed in 1.9, see https://bugzilla.mozilla.org/show_bug.cgi?id=383075.
So this won’t work anymore when Firefox 3 is released.
Jaap said on September 3rd, 2007.
Looks like we found ‘that someone’, thanks Jaap!
Arjan Eising said on September 3rd, 2007.
No problem, although I meant to say Gecko instead of Mozilla…
Jaap said on September 4th, 2007.
Well, it works in FF 3.0.3 so…

Can s.o. provide a JS used to change CSS style attributes that works X browsers?
M.Zografski said on October 16th, 2008.
M.Zografski:
As Jaap pointed out, it indeed works in Firefox 3. The crossbrowser way of changing a CSS property via JavaScript is this:

elm.style.property = "value";

Where elm is a reference to an element in the HTML DOM.
Arjan Eising said on October 20th, 2008.
Thanks Arjan,
I’ll test is asap.
M.Zografski said on October 20th, 2008.
This code:
elm.style.display = “none;”;

Equals this one:
elm.style.display = “none
;
“;

That is, you’ve broken the string input, and now its useles.
Troy III said on November 4th, 2008.
Troy III:
Thanks for your comment. That is not the problem, a string may contain a semicolon.
Arjan Eising said on November 4th, 2008.
True, you can enter semi-colon symbols on literal strings without problems.

The problem will rise when you pass them as input value of/to some other language.
the stringvalue: “none;” might get passed as word “none&59″ instead of “none + [newline]”.

Causing CSS to ignore it as incorrect declaration/value.

We all know that we can not use: “elm.style.border-left” as js 2 css instruction since “-” in js has an operational meaning. Therefore to avoid lang discrepancies,it was necessary to convert it to “bortderLeft”.

Not to forget one other very important thing: JS to CSS manipulations are implemented through inline-style, html domain, not in CSS.

So, if this line of html code
…
will work in FX2 or 3, I will be very puzzled.

Although this one:

(oddly enough), will work on IE!

Regards.
Troy III said on November 4th, 2008.
Sorry my example code got swept away:
div style=”display=’none;’;” [will not work]

div style=”display=’none’;” [will work on IE!]

but the correct inline statement should be:

div style=”display:none”
Troy III said on November 4th, 2008.

Respond

Wordpress and Akismet powered
Syndication feeds: RSS & Atom
Contact information

Pages

Feeds

Categories

Archives

I wanted to change a CSS value using JavaScript…

20 responses to I wanted to change a CSS value using JavaScript…

Respond