3
I want to turn this line that is jQuery into pure Javascript:
$('#menu #<? echo $idMenuAtivo; ?>').addClass('active');
How could I turn him?
3
I want to turn this line that is jQuery into pure Javascript:
$('#menu #<? echo $idMenuAtivo; ?>').addClass('active');
How could I turn him?
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
:
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();
}
It is not simpler to use the element.classList
straightforward?
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>
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.
@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.
Well that
#menu
could come out of the code, since the second part is aid
and will be unique. Only onegetElementById("<?= $idMenuAtivo ?>")
would be enough and perhaps faster?– Woss
@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.
– Guilherme Nascimento
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.– Woss
Ta wrong function name is
toggle
and nottoogle
– Sveen
@Sveen thank you very much, already corrected.
– Guilherme Nascimento