Traté de reemplazar una clase. Encontré este ejemplo de trabajo: javascript: reemplace classList que está en un condicional
mi modificación (visible abajo) no funciona.
classList.replace debe reemplazar todas las clases xxx1yyy con xxxyyy
significa que necesito reemplazar todas las clases como my1bla, mu 1 bla, my 1 hu, …1… y más a mybla, mubla, myhu, …
<!DOCTYPE html>
<html>
<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" class="my1bla">
I am a DIV element
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.classList.contains("1")) {
x.classList.replace("1", "");
} else if (x.classList.contains("1")) {
x.classList.replace("1", "");
}
}
</script>
No puedes cambiarlo por una sola word. .contains devuelve verdadero o falso y .replace reemplazará todo el nombre de la className
<!DOCTYPE html>
<html>
<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" class="my1bla">
I am a DIV element
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.classList.contains("my1bla")) {
x.classList.replace("my1bla", "mybla");
} else if (x.classList.contains("my1bla")) {
x.classList.replace("my1bla", "mybla");
}
}
</script>
Prueba esto:
function myFunction() {
var x = document.getElementById("myDIV");
x.classList.value = x.classList.value.replace("1", "");
}
Puedes usar Element.classList.toggle
function myFunction() {
const x = document.getElementById("myDIV")
x.classList.toggle('my1bla')
x.classList.toggle('mybla')
}
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" class="my1bla">
I am a DIV element
</div>
<script>
</script>