How to add a pure Javascript class?

Asked

Viewed 19,220 times

3

I want to turn this line that is jQuery into pure Javascript:

$('#menu #<? echo $idMenuAtivo; ?>').addClass('active');

How could I turn him?

javascript

3 answers

12

With browsers "modern" suffice:

document.querySelector('#menu #<? echo $idMenuAtivo; ?>').classList.add("active");

Or if you want to "alternate":

document.querySelector('#menu #<? echo $idMenuAtivo; ?>').classList.toggle("active");

Documentation:

Support for the classList:

  • Chrome
  • Firefox
  • IE 10+
  • Safari 5.1+
  • 4

    Well that #menu could come out of the code, since the second part is a id and will be unique. Only one getElementById("<?= $idMenuAtivo ?>") would be enough and perhaps faster?

  • 1

    @Andersoncarloswoss I was going to do this, but I don’t know which HTML code is specific, so it could cause side effects, it’s very common for people to mistakenly repeat Ids.

  • 1

    In fact. I believed that this side effect would happen anyway, but it seems that the browser can differentiate elements of same id whether or not they are duplicated (https://jsfiddle.net/acwoss/4n7jbxzv/). This was new to me.

  • Ta wrong function name is toggle and not toogle

  • @Sveen thank you very much, already corrected.

3

You could create your own addClass function, like this:

function addClass(element, classname){
    var currentClassList = (element.className || '').split(/\s+/);
    currentClassList
     .push(currentClassList.indexOf(classname) > -1 ? '' : classname);
    element.className = currentClassList.join(' ').trim();
}
  • 1

    It is not simpler to use the element.classList straightforward?

  • 2

    Clear in theory should work on all browsers except in IE7 your solution

1

Below is an example of how to insert class in javascript and remove:

function addClass(id, classe) {
  var elemento = document.getElementById(id);
  var classes = elemento.className.split(' ');
  var getIndex = classes.indexOf(classe);

  if (getIndex === -1) {
    classes.push(classe);
    elemento.className = classes.join(' ');
  }
}

function delClass(id, classe) {
  var elemento = document.getElementById(id);
  var classes = elemento.className.split(' ');
  var getIndex = classes.indexOf(classe);

  if (getIndex > -1) {
    classes.splice(getIndex, 1);
  }
  elemento.className = classes.join(' ');
}
.active {
  color: blue
}
<button onClick="addClass('teste', 'active')">Adicionar classe</button>
<button onClick="delClass('teste', 'active')">Remover classe</button>

<div id="menu">
  <div id="teste">
    Olá!
  </div>
</div>

  • 2

    And if there is a word active in other classes? This removal function is well failed.

  • @Andersoncarloswoss, I changed the code to avoid this error, would really give problem in other classes with the same name. Thanks for the comment, went mega unnoticed kkk

  • Nice that you corrected, so there’s no risk for the unsuspecting. I took out my negative. But there’s still one flaw: your addClass allows the same class to be included multiple times in the string. And removeClass new will only remove the first occurrence.

  • 1

    @bfavaretto, fixed this item too! ;) I think now it was rsrs

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.