i tried to replace a class. found this working example: javascript: replace classList that is into a conditional
my modification (visible below) don't work.
classList.replace should replace all classes xxx1yyy with xxxyyy
means i need replace all classes like my1bla, mu1bla, my1hu, …1… and more to 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>You cant change it by a single word. .contains returns true or false & .replace will replace the whole 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>Try this:
function myFunction() {
var x = document.getElementById("myDIV");
x.classList.value = x.classList.value.replace("1", "");
}
You can use 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>