alex242 Posted August 28, 2010 Share Posted August 28, 2010 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 More sharing options...
chibineku Posted August 28, 2010 Share Posted August 28, 2010 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 More sharing options...
Ingolme Posted August 28, 2010 Share Posted August 28, 2010 The "className" property works properly across all modern browsers: element.className = "newClass"; Link to comment Share on other sites More sharing options...
alex242 Posted August 28, 2010 Author Share Posted August 28, 2010 ah, thank you, that does work. I still do wonder why they couldn't just have stuck with 'class' instead of 'className' to be consistent... Link to comment Share on other sites More sharing options...
Ingolme Posted August 28, 2010 Share Posted August 28, 2010 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. Link to comment Share on other sites More sharing options...
boen_robot Posted August 28, 2010 Share Posted August 28, 2010 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 More sharing options...
alex242 Posted August 28, 2010 Author Share Posted August 28, 2010 ah, yea, that does make sense. Sorry for the scrutiny internet language guys. Link to comment Share on other sites More sharing options...
jeffman Posted August 28, 2010 Share Posted August 28, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.