Welcome to WebmasterWorld Guest from 207.241.229.227

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / JavaScript and AJAX

Forum Moderators: open

Message Too Old, No Replies

setAttribute className not working properly in Firefox

     

mattr555

1:53 pm on Feb 22, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 10, 2004
posts:47
votes: 0


In the code below, i am using a javascript function to insert a div, a paragraph, and a text node into the dom. This part works. I then tried to give the div a classname using newdiv.setAttribute("className","floater"). Using Firefox's DOM Browser, i can see that the div is being assigned a class called "floater" but the styles associated with this class (just a border and margin) do not show in Firefox. The styled div does show in IE6.

I am new to JS and this is just a sandbox page.

Any ideas?

<html>
<head>
<title>DOM Scripting Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link id="stylelink" rel="stylesheet" type="text/css" href="jstest.css" media="screen" />

<script type="text/javascript">

function insertdiv(){
var newdiv = document.createElement('div');
var newpara = document.createElement('p');
var thetext = document.createTextNode('test');

newpara.appendChild(thetext);
newdiv.appendChild(newpara);
newdiv.setAttribute("className","floater")

document.getElementById('jstest').appendChild(newdiv);

}
</script>

</head>
<body id="jstest">

<a href="javascript:insertdiv()">click to insert div</a>

</body>
</html>

orion_rus

2:07 pm on Feb 22, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 3, 2004
posts:598
votes: 0


try to avoid setAttribute it have a good working in Mozilla's browsers but have much problems with IE. To change className i always use
newdiv.className='floater'; and all works fine in any browsers

mattr555

2:09 pm on Feb 22, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 10, 2004
posts:47
votes: 0


Well it works in IE and seems to apply the class name in Firefox but Firefox isnt applying the class styles for some reason.

mattr555

2:11 pm on Feb 22, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 10, 2004
posts:47
votes: 0


orion, your method does work in both browsers but why wouldnt setAttribute not work in Firefox as it should be DOM complient?

Bernard Marx

4:25 pm on Feb 22, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


FireFox uses: 

[color=brown]elm.setAttribute('class','whatever')[/color]

The reason we can't use 

[color=brown]elm.[red]class[/red] = 'whatever'[/color]
is that class is a JS reserved word. This doesn't apply to setAttribute, because it doesn't use dot syntax (language neutral). IE has forgotten that.

So that's one reason to stick with dot syntax (apart from the fact that it's shorter). Strict whatever can wait.

- after all, nobody worries about accessing nodelist members using 

[blue][n][/blue]
rather than 
[blue].item(n)[/blue]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / JavaScript and AJAX