Add a class with Javascript

Question

When a particular page loads, these are the state of the <li> elements:

<li class="li1 frame3" style="display: list-item; opacity: 0.3; left: 0px; top: 20px; z-index: 2;"></li>
<li class="li2 frame4" style="display: list-item; opacity: 0.3; left: 151px; top: 0px; z-index: 2;"></li>
<li class="li3 frame5" style="display: list-item; opacity: 0.3; left: 0px; top: 0px; z-index: 2;"></li>

At any point, there is only one <li> having the left: 0px; top: 0px. I want to add a class (say, .dummy ) to the <li> element that has this property using javascript.

I'm a newbie in Javascript. I tried add ign this:

$("li").addClass("dummy");

But I couldn't figure out the required if statement.

loop thru all <li> elements and compare element.style.left and element.style.top. I am afraid there is no easier way to do it — Peter
– Peter, Commented Jan 27, 2013 at 10:24
@JackManey: Please see the edits, and please remove the down-vote. — xan
– xan, Commented Jan 27, 2013 at 10:32
@xan - I'll downvote whenever I please. What do you mean "required if statement"? If you want to add a class to an element, then add a class to an element. — user554546
– user554546, Commented Jan 27, 2013 at 10:36
@JackManey: I also need the condition, that when a particular <li> element is found to have the property left:0px; top:0px apply the addClass to that <li> element only. I was unable to figure out that condition; how to check for the inline style. — xan
– xan, Commented Jan 27, 2013 at 10:39

Mathias Schwarz · Accepted Answer · 2013-01-27 10:31:44Z

2

If you are asking how to add a class name to a DOM element, it goes something like this:

var liElements = document.getElementsByTagName("li");
for (var i = 0; i < liElements.length; i++) {
  var liElement = liElements[i];
  if (liElement.style.top == "0px" && liElement.style.left == "0px") {
    liElement.className += " dummy"; //Add the class name. Notice that the property is not called 'class'
  }
}

Edit: Added code to loop through li elements...

edited Jan 27, 2013 at 10:31

answered Jan 27, 2013 at 10:26

Mathias Schwarz

7,19725 silver badges28 bronze badges

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

Comments

korywka · Accepted Answer · 2013-01-27 11:31:52Z

1

div.classList.add("anotherclass");

details: https://developer.mozilla.org/en-US/docs/DOM/element.classList

answered Jan 27, 2013 at 11:31

korywka

7,6622 gold badges28 silver badges50 bronze badges

1 Comment

Ana Over a year ago

Perhaps you should put the support info for classList here. Don't get me wrong, I think classList is great, I use it a lot myself, but I'm aware of the fact that I'll need an alternative if I have to support IE9/ IE Mobile.

Boguz Didgeridoo · Accepted Answer · 2013-01-27 10:29:00Z

-2

i'm not sure what you want to do.

but to add a class with jquery you can use this:

$(selector).addClass(classname,function(index,oldclass))

You can read about it here: http://www.w3schools.com/jquery/html_addclass.asp

answered Jan 27, 2013 at 10:29

Boguz Didgeridoo

1513 silver badges16 bronze badges

1 Comment

Mathias Schwarz Over a year ago

This is not a jQuery question

Collectives™ on Stack Overflow

Add a class with Javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related