Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > set dom element class (if element was dynamically created)

Reply
Thread Tools

set dom element class (if element was dynamically created)

 
 
ted benedict
Guest
Posts: n/a
 
      01-25-2006
hi everybody, didn't find this using the search this is my problem:
i create a dom element dynamically (<span>) and want to assign a class
attribute to it such that it has some css style, this works in ie, but
not in firefox here's the simple code:

<div id="somediv">
</div>

var div = window.document.getElementById("somediv");
var span = window.document.createElement("span");
span.innerHTML = "span";
span.attributes.getNamedItem("class").nodeValue = "span_class";
div.appendChild(span);

so this works well in ie6, but firefox gives this error:
Error: span.attributes.getNamedItem("class") has no properties

if i run this code on a statically defined span (in the html file),
where a class attribute already is set:
<div id="somediv">
<span id="spanspan" class="">
</span>
</div>
changing the class to "span_class" works both in ie and firefox.

how can i fix my above code such that it works in both browsers? it
seems that on newly created dom elements the class attribute isn't even
there (to change it), how can i create it, and then change it?

thanks for your time, all the best

 
Reply With Quote
 
 
 
 
marss
Guest
Posts: n/a
 
      01-25-2006
span.className = "span_class";

 
Reply With Quote
 
 
 
 
ted benedict
Guest
Posts: n/a
 
      01-25-2006
thanks marss, this solved the problem!

i also found another (a bit longer) solution as an alternative, if it
helps somebody

var class_attrib = window.document.createAttribute("class");
class_attrib.nodeValue = "span_class";
span.attributes.setNamedItem(class_attrib);

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-27-2006
ted benedict wrote:
> thanks marss, this solved the problem!
>
> i also found another (a bit longer) solution as an alternative, if it
> helps somebody
>
> var class_attrib = window.document.createAttribute("class");
> class_attrib.nodeValue = "span_class";
> span.attributes.setNamedItem(class_attrib);


'class' is a future reserved word in JavaScript 1.5 (the version most
commonly implemented in modern browsers), hence the use of 'className'
to refer to the HTML element attribute 'class'.

There are proposals to add classes (and hence use the 'class' keyword)
to ECMAScript Ed 4:
<URL:http://www.mozilla.org/js/language/es4/core/classes.html>

and JavaScript 2.0:
<URL:http://www.mozilla.org/js/language/js20/core/classes.html>.

Microsoft has already added classes to JScript .NET.
<URL:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnclinic/html/scripting07142000.asp>




--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Position an element dynamically on top of an existing element Konrad Hammerer HTML 14 02-07-2008 11:34 PM
DOM using outerHTML to set class attribute in <td> tag onembk Javascript 0 09-13-2006 08:19 PM
Dynamically set value in htmlselectelement via DOM? kevinold@gmail.com Javascript 1 02-09-2006 03:17 PM
Nested Class, Member Class, Inner Class, Local Class, Anonymous Class E11 Java 1 10-12-2005 03:34 PM
Is it possible to set a form element's title with Javascript and DOM? Christopher Nelson Javascript 6 03-16-2005 10:50 PM



Advertisments