How do I add a class to a specific class on a specific page using pure Javascript? I've played around with a number of different code-snippets but can't manage to get anything to work. I'm looking for something like the following:

<script>
    if (window.location.href == '') {
      $(somecode).find('existingClass').addClass('newClass');
   };
</script>

How do I add a class to a specific class on a specific page using pure Javascript? I've played around with a number of different code-snippets but can't manage to get anything to work. I'm looking for something like the following:

<script>
    if (window.location.href == 'http://specific-page.') {
      $(somecode).find('existingClass').addClass('newClass');
   };
</script>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 10, 2017 at 15:05 liveleweekendliveleweekend 18122 silver badges1010 bronze badges 2

• Can't you replace somecode with the element type i.e. div, input, ul, li? – pee2pee Commented Feb 10, 2017 at 15:08
• 3 Did you try using find('.existingClass'). You need to specify selector. I suppose 'existingClass' is a class, so you need '.' in front of it – Armin Commented Feb 10, 2017 at 15:09

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can use querySelectorAll plus NodeList.forEach().

Moreover, you can take a look to the Element.classList methods.

The snippet:

//
// For test purposes only
//
window.location.href1 = 'http://specific-page.';


if (window.location.href1 == 'http://specific-page.') {
  document.querySelectorAll('#myDiv .existingClass').forEach(function(ele, idx) {
    ele.classList.add('newClass');
  });
};

.existingClass {
  height: 30px;
  background-color: red;
}
.newClass {
  border-style: dotted;
}

<div id="myDiv">
    <p class="existingClass">Thbis is a sample string</p>
</div>

It should work:

<script>
  if (window.location.href == 'http://specific-page.') {
    $('.existingClass').addClass('newClass');
  };
</script>

What you have to do is to use the class you are looking for as a selector, in this case it is ".existingClass".

There are many other ways to do it depending on what you are trying to acchive.

Other post:

jquery change class name

jQuery changing css class to div

how to change class name of an element by jquery

If you want to do this in Vannila JS, then you can use the code from below. It doesn't use jQuery.

if ( window.location.href == 'http://specific-page.' ) {
  var el = document.getElementsByClassName("currentClass")[0];
  var newClass = el.getAttribute("class");
  newClass += " myNewClass"; 
  el.setAttribute("class", newClass)
  console.log(el)
  }

You can use the setAttribute to set the Attribute class to a new value. In the value, you can add the new class to the existing class value. Also, the getElementsByClassName returns the Elements list, so you need to select the right element Appropriately. I am using the element at first index below.

var elements = document.getElementsByClassName("existingClass");
elements[0].setAttribute( "class", "existingClass" + " newClass" );

this is the easiest but get elements by classname will fail on some browsers like older i.e.

patibility can be found here - https://developer.mozilla/en-US/docs/Web/API/Document/getElementsByClassName#Browser_patibility

 // JavaScript Document

window.onload = init;
var divsWithClass = null;


function init() {
    if (window.location.href.indexOf("some value you care about") >= 0) {
        this.divsWithClass = document.getElementsByClassName("Some Class Name");
        var index = 0;
        while (index < divsWithClass.length) {
            divsWithClass[index].className += " newClass";
            index++;
        }
    }
    console.log(divsWithClass);
}