javascript setAttibute doesn't add CSS class

Question

Here's the problem I face: I've created a menu and I want when a child li element is clicked a class to be added to the parent li element.

These are the parts of my code that they are relevant to the above:

<head>
<script type="text/javascript">
    function changeClass (elementID, newClass) {
        var element = document.getElementById(elementID);

        element.setAttribute("class", newClass); //For Most Browsers
        element.setAttribute("className", newClass); //For IE; harmless to other browsers.
     }
</script>
</head>

<body>
     <li id="galleries" class="galleries">
     <a class="sf-with-ul" href="#">Galleries<span class="sf-sub-indicator"> &#187;</span></a>
     <ul>

         <li>
             <a href="timetest.php?action=add_gallery"onClick="changeClass('galleries',current)">Add Gallery</a>
         </li>
         <li><a href="timetest.php?action=edit_gallery">Edit Gallery</a></li>
     </ul>
         </li>
</body>

current is the class that i want to be added at the element with the id=galleries.

Please help me if you have an idea why this doesn't work. The rest code of my page is written in PHP if this has any role to play.

There's no need to call `setAttribute()` two times. Changing `className` DOM attribute works in all browsers. — duri, Dec 01 '11 at 17:49

score 3 · Answer 1 · edited May 23 '17 at 12:20

3

Have you tried doing element.className = "new-class"? This is also discussed in depth at Change an element's class with JavaScript I suggest you use jQuery because it does take care of this for different browsers.

edited May 23 '17 at 12:20

Community

1
1

answered Dec 01 '11 at 17:47

Amir Raminfar

33,777
7
93
123

2

I always wonder why people use setAttribute when directly referencing the property works fine and seems more direct. `.className` works in all browsers. – jfriend00 Dec 01 '11 at 17:51
@jfriend00 agreed. I found many websites that suggest using `setAttribute` but really you can just use `.className` directly. I have been doing it since 2002 and it never failed me. :) – Amir Raminfar Dec 01 '11 at 17:52
@jfriend: most likely stems from the "zomg directly accessing an object's properties. BAD BAD BAD. must use setters/getters!" cargo-cult attitude. – Marc B Dec 01 '11 at 17:53
Yes i tried that too and it didn't help... I've spent much time reading all the ways that this should be solved and nothing works..It seems that javascript code is not interpreted right. – fotant Dec 01 '11 at 18:02
Can you show code? there is something else if it is not working. put it on jsfiddle.com and we can help you out. – Amir Raminfar Dec 01 '11 at 18:05
@jfriend00: The HTML-DOM inherits from the DOM. This means that `elem.setAttribute()` should always work - but that isn't the case in older IE for class, style and for (and maybe more). – Saxoier Dec 01 '11 at 18:19
@Saxioer - you make my point. Since `.className = "foo"` always works, why use `.setAttribute("class", "foo")` – jfriend00 Dec 01 '11 at 18:25

score 0 · Answer 2 · answered Dec 01 '11 at 17:48

0

In the context of what you've written:

onClick="changeClass('galleries',current)"

current would be a javascript variable.

Did you mean:

onClick="changeClass('galleries','current')"

answered Dec 01 '11 at 17:48

hunter

62,308
19
113
113

ooh good find I didn't see that. Maybe he didn't paste the part where `current` is var. – Amir Raminfar Dec 01 '11 at 17:50
I'm guessing if OP did what I suspect, what you wrote would be more concise, but what they have *should* work – hunter Dec 01 '11 at 17:52
Where I found this script,it was mentioned that when you call the function you should not forget to put the elementID into quotes.It didn't mention anythind about the new class(current).But I tried it and there's no difference... – fotant Dec 01 '11 at 18:07

score -1 · Answer 3 · answered Dec 01 '11 at 18:17

-1

why dont you use addClass inspite of setAttr?

$('.menu li').parent().addClass("className");

answered Dec 01 '11 at 18:17

Marco Moraes

21
1

OP is not using jquery, and javascript is not jQuery. – Amir Raminfar Dec 01 '11 at 18:20
-1 for asking why they aren't using a jQuery method when this is not a question involving jQuery. – jfriend00 Dec 01 '11 at 18:24
yes this is jQuery I would prefer something in pure javascript.. Both element.setAttribute("className", newClass) and element.className=newClass in the function should work but they don't. Do I have something wrong in the way I call the function? – fotant Dec 01 '11 at 19:10

javascript setAttibute doesn't add CSS class

3 Answers3