Why am I not able to modify the class of the element with the classList property?

Asked

Viewed 101 times

4

I’m using the property classList to modify the class of the element, but it does not happen the result I want, because it does not modify the current class to the new.

let p1 = document.querySelector("#p1");

p1.classList[0] = "new-class";

console.log(p1);
<p id="p1" class="class1 class2 class3"></p>

But if I try to assign a value to the property classList without an index, all classes are excluded, with only the new one assigned.

let p1 = document.querySelector("#p1");

p1.classList = "new-class";

console.log(p1);
<p id="p1" class="class1 class2 class3"></p>

Why is this happening?

javascript

3 answers

5


This happens because the value returned by Element.classList is a DOMTokenList, that despite having similar behaviors to array, does not always share the same behaviors.

An example of this is to perform a class change based on the index. If you do:

element.classList[0] = 'foo';

The class foo will not be reflected, simply because this is not how the DOMTokenList works.

That way, if you want to work with the classList, will have to use one of the available methods.

Maybe the replace do what you need. The problem is that you will exchange a class based on your value old, and not by the index. See:

const el = document.querySelector('div');

console.log(el.classList.value);

el.classList.replace('b', 'd');

console.log(el.classList.value);
<div class="a b c"></div>

If you really want to change a class by its index, it is possible to create a "gambiarra" for it. However, I do not recommend doing it, since DOMTokenList is a "live list", that is, its value will be changed automatically whenever a class is changed.

Anyway, I’d be like this:

function changeClassByIndex(element, index, newClass) {
  // Obtemos o valor da classe atual pelo índice:
  const currentClass = element.classList.item(index);
  
  // Trocamos a classe atual:
  element.classList.replace(currentClass, newClass);
}

const el = document.querySelector('div');

console.log(el.classList.value); // a b c

changeClassByIndex(el, 1, 'd');

console.log(el.classList.value); // a d c
<div class="a b c"></div>

  • It was exactly what I expected the property to classList behaved as if it were an Array since it has how you return the class through the index without having to use specific methods for it.

  • Yes, the problem is that if you change a value by the index, it will not be reflected in the DOM nor itself DOMTokenList.

  • blz! Thank you :)

3

Using the classList, to exchange an element class for ourtra, the replace method must be called, passing the class that must be exchanged and the new one, for example:

p1.classList.replace("old-class", "new-class");

There are other functions as well, such as remove and toggle, take a look at MDN documentation to better understand

  • Yes, but I speak change the class without playing it to the end or without changing the order of the classes so I specified with the index.

  • You want to change class, foo for bar, for example?

  • Yes, but using the above syntax without having to use, for example, the method replace().

  • There is no way to do with the syntax you have shown, this is not how the API works, if it worked it would not have created the question

-4

Is missing by text, ex.:

Text

as below:

let p1 = document.querySelector("#p1");

p1.classList = "new-class";
.class1{
  color: blue;
}
.class2{
  font-size: 12px;
}
.class3{
  font-weight: bold;
}
.new-class{
 color: red;
 font-size: 12px;
 font-weight: bold;
}
<h3>Está faltando por o texto dentro da tag, conforme abaixo.</h3>

<p id="p1" class="class1 class2 class3">Texto</p>

<br>
<br>
<h3>A sua publicação é a mais simples e muito funcional comparado com as dezenas que eu vi até agora. Obrigado!!!!!</h3>

  • That’s not what he wants, that’s his second example. " But if I try to assign a value to the property classList without an index, all classes are excluded, with only the new one assigned. "

Browser other questions tagged javascript

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