1 An easier way?

Can anyone tell me if the above method is better than simply using:

p3.setAttribute(“class”,”labrat”, 0); p3.setAttribute(“className”,”labrat”, 0);

Regards,

Chris

posted at 12:29 am on September 06, 2005 by Chris Gillis

2 Yes, there's an easier way

In my experience, yes—setting the “className” property of a DOM node will apply the class to the node in question in all modern browsers I’ve tried.

I generally use that approach in my scripts; “class” itself is theoretically a reserved word for “JavaScript 2.0”, too.

posted at 01:27 am on September 06, 2005 by Angus Turnbull

3 setAttribute in IE

In my experience, setAttribute in IE will not compile the attribute’s actual action into the IE document model. For instance if you’ll try something like this: myElement.setAttribute(“onclick”, “doSomething()”, 0);

IE won’t actually register this event to the object. To my surprise, Firefox will actually do this. So what I’m trying to say, that setAttribute in IE won’t do you any good with attributes like ‘class’, ‘style’, ‘maxlength’, ‘value’, etc.. In my experience, you’ll have to use the “proper” procedure: myElement.className = “yourClassName”;

Using setAttribute and getAttribute for your own custom attributes works perfectly on the latest browsers..

posted at 01:44 am on September 06, 2005 by Rafi B.

4 A little improvement

Nice work! I’ll use it for sure. But there’s one improvement I’d make. I would add “return false;” to every onclick event in the menu to avoid annoying page leaping. So I’d rewrite:

<dd class=”all”> <a href=”#fvlogger” onclick=”showAll();” title=”show all”>all</a> </dd>

as:

<dd class=”all”> <a href=”#fvlogger” onclick=”showAll(); return false;” title=”show all”>all</a> </dd>

posted at 06:08 am on September 06, 2005 by Tomasz Kupczyk

5 Clever, very Clever

As someone just starting to dabble in the world of slightly more advanced Javascripting, I find the prospect of debugging scripts in non-FF browsers to be a very very scary one. So thanks for the tips.

However, related to that awkward setAttribute loop, is object.className now a deprecated property?

posted at 07:00 am on September 06, 2005 by Mike Purvis

6 should these <strong> tags be there?

for (i = 0; i < attrs.length; i++) { <strong>debug(“attribute #” i ”: ” + attrs[i].name ”=” attrs[i].value);</strong> }

posted at 08:47 am on September 06, 2005 by Scott Matthews

7 A timely article!

Agreed, this is very clever. More importantly (now that it’s here), it’s available to those doing coding that are experiencing more cross-browser issues as the Ajax approach is becoming more common. This would have been a lifesaver on a project I completed recently, and my company hesitant about Ajax due to concerns about difficulties in maintenance and debugging.

Thanks!

posted at 09:16 am on September 06, 2005 by Mark Shields

8 debuggers

Let’s not forget the Venkman plugin for firefox (http://tinyurl.com/cmu7j). It’s easy to use and works well.

posted at 09:43 am on September 06, 2005 by clint troxel

9 a

Looping round the attributes after already calling getAttributeNode seems a bit wasteful, this should (and does) work:

var attributeNode = p3.getAttributeNode(“class”); if (attributeNode) { &nbsp;&nbsp;attributeNode.value = className; } else { &nbsp;&nbsp;p3.setAttribute(“class”, className); }

posted at 11:31 am on September 06, 2005 by Ash Searle

10 Set the value on the Attr Node.

(apologies for this double-comment; ‘comment preview’ needs a few wrinkles ironing out.)

This comment applies to the fvlogger code, as mentioned in the ‘Solution’ section of the article, and which appears in the fvlogger function FVL_log

var attributeNode = p3.getAttributeNode(“class”); if (attributeNode) { attributeNode.value = className; } else { p3.setAttribute(“class”, className); }

Similarly, for getNodeClass you could do: var attributeNode = p3.getAttributeNode(“class”); return attributeNode && attributeNode.value;

The implementation’s good though. I’d fallen into the habbit of using .className, which seems to work, but isn’t part of the DOM spec. The approach in the article is more pure.

posted at 12:05 pm on September 06, 2005 by Ash Searle