How to add class to div depending on url in Javascript?

Question

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.com') {
      $(somecode).find('existingClass').addClass('newClass');
   };
</script>

Can't you replace somecode with the element type i.e. div, input, ul, li? — pee2pee, Feb 10 '17 at 15:08
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, Feb 10 '17 at 15:09

score 3 · Answer 1 · answered Feb 10 '17 at 15:29

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.com';


if (window.location.href1 == 'http://specific-page.com') {
  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>

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

It should work:

<script>
  if (window.location.href == 'http://specific-page.com') {
    $('.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

edited May 23 '17 at 10:29

Community

1
1

answered Feb 10 '17 at 15:09

Facundo La Rocca

3,786
2
25
47

The OP says "pure javascript". I'm assuming he doesn't want a jQuery solution. – sadmicrowave Feb 10 '17 at 15:29
He has posted as an example a jQuery code. I assumed OP was referencing jQuery as JavaScript. – Facundo La Rocca Feb 10 '17 at 15:32

throwSmartDev · Answer 3 · 2017-02-10T15:19:00.350

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

compatibility can be found here - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName#Browser_compatibility

 // 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);
}

Abhinav Galodha · Answer 4 · 2017-02-10T15:16:47.120

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" );

score 0 · Answer 5 · answered Feb 10 '17 at 15:16

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.com' ) {
  var el = document.getElementsByClassName("currentClass")[0];
  var newClass = el.getAttribute("class");
  newClass += " myNewClass"; 
  el.setAttribute("class", newClass)
  console.log(el)
  }

How to add class to div depending on url in Javascript?

5 Answers5