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.

Answer 1

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

Answer 2

div.classList.add("anotherclass");

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

Answer 3

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