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
– duri, Commented Dec 1, 2011 at 17:49

Community · Accepted Answer · 2017-05-23 12:20:12Z

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, 2017 at 12:20

CommunityBot

11 silver badge

answered Dec 1, 2011 at 17:47

Amir Raminfar

34.2k8 gold badges97 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jfriend00 Over a year ago

I always wonder why people use setAttribute when directly referencing the property works fine and seems more direct. .className works in all browsers.

Amir Raminfar Over a year ago

@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. :)

Marc B Over a year ago

@jfriend: most likely stems from the "zomg directly accessing an object's properties. BAD BAD BAD. must use setters/getters!" cargo-cult attitude.

fotant Over a year ago

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.

Amir Raminfar Over a year ago

Can you show code? there is something else if it is not working. put it on jsfiddle.com and we can help you out.

|

hunter · Accepted Answer · 2011-12-01 17:48:03Z

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 1, 2011 at 17:48

hunter

63.7k19 gold badges115 silver badges115 bronze badges

3 Comments

Amir Raminfar Over a year ago

ooh good find I didn't see that. Maybe he didn't paste the part where current is var.

hunter Over a year ago

I'm guessing if OP did what I suspect, what you wrote would be more concise, but what they have should work

fotant Over a year ago

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...

Marco Moraes · Accepted Answer · 2011-12-01 18:17:58Z

-1

why dont you use addClass inspite of setAttr?

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

answered Dec 1, 2011 at 18:17

Marco Moraes

211 bronze badge

3 Comments

Amir Raminfar Over a year ago

OP is not using jquery, and javascript is not jQuery.

jfriend00 Over a year ago

-1 for asking why they aren't using a jQuery method when this is not a question involving jQuery.

fotant Over a year ago

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?

Collectives™ on Stack Overflow

javascript setAttibute doesn't add CSS class

3 Answers 3

7 Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related