Jump to content

HTML DOM can't change 'class' atribute?


alex242
 Share

Recommended Posts

Below is some code that creates some text with a border that rotates between four different styles.It took me a bit longer than expected to write, because for some reason I could not get or set the 'class' attribute of the <p> element!The first block of code is what I got to work using the 'id' attribute, but the same effect would have been easier to achieve with classes.The second block of code is what I couldn't get to work. My question is: why? Is is because you can't use HTML DOM with the 'class' attribute, or am I doing something wrong?

<html><head><style type="text/css">#p1{border-style:solid;border-color:#00ff00 #0000ff rgb(250,0,255) #ff0000;}#p2{border-style:solid;border-color:#0000ff rgb(250,0,255) #ff0000 #00ff00;}#p3{border-style:solid;border-color:rgb(250,0,255) #ff0000 #00ff00 #0000ff;}#p4{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}</style><script type="text/javascript">var i = 1;var x = "p1";var t;function go(){	if (i == 4)	{		i = 1;		document.getElementById(x).id = ("p" + i.toString());	} 	else 	{		i = i + 1;		document.getElementById(x).id = ("p" + i.toString());	} 		x = "p" + i.toString();	document.getElementById(x).innerHTML = x;	t = setTimeout("go()",250);}</script></head><body onload="go()"><p id="p1">Four-colored border!</p></body></html>

<html><head><style type="text/css">p.p1{border-style:solid;border-color:#00ff00 #0000ff rgb(250,0,255) #ff0000;}p.p2{border-style:solid;border-color:#0000ff rgb(250,0,255) #ff0000 #00ff00;}p.p3{border-style:solid;border-color:rgb(250,0,255) #ff0000 #00ff00 #0000ff;}p.p4{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}</style><script type="text/javascript">var i = 1;var x = "p1";var t;function go(){	if (i == 4)	{		i = 1;	} 	else 	{		i = i + 1;	} 		x = "p" + i.toString();	document.getElementById("here").innerHTML = x;	document.getElementById("here").class = x;	t = setTimeout("go()",250);}</script></head><body onload="go()"><p id="here" class="p1">Four-colored border!</p></body></html>

Link to comment
Share on other sites

You have to work through the element and any children and copy it, creating a new element the class of which you can change. That's using vanilla JavaScript. Using jQuery, it's a much simpler matter:$('#elementid').attr('class', 'newclassname');Same works for id, which I don't think is straightforward to change manually.

Link to comment
Share on other sites

It's strange, yes. Maybe they did it because in normal programming languages "class" is reserved. It's the same with the CSS float property. In Javascript it's .style.cssFloat or style.styleFloat depending on the browser. Probably because a lot of programming languages have "float" reserved as well to declare floating point numbers.

Edited by Ingolme
Link to comment
Share on other sites

Yeah... in JavaScript, "class" is a reserved word, even though JavaScript doesn't have classes. They've reserved it in case future versions of the language decide to use it. If they do, "old" (that is, all current and past) browsers will crash with a parsing error on scripts that use this word.

Link to comment
Share on other sites

Don't be sorry. :) these issues are subtle, and knowing the reasons for stuff helps you understand the big picture a little more clearly.The only thing to apologize for is when people are given good advice, they refuse to take it, and then complain when they still have a problem. This isn't you. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...