When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

Question

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional

Unfortunately, my attempt at modification (shown below) did not work.

The use of classList.replace should change all instances of the class xxx1yyy to xxxyyy

This means I want to replace classes like my1bla, mu1bla, my1hu, …1… and so on with 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>

javascript html css

Answer 1

Answer №1

Give this a shot:

function updateClass() {
  var element = document.getElementById("targetElement");

  element.classList.value = element.classList.value.replace("oldClass", "newClass");
}

https://example.com/code-sample-link

Answer 2

Give this a shot:

function updateClass() {
  var element = document.getElementById("targetElement");

  element.classList.value = element.classList.value.replace("oldClass", "newClass");
}

https://example.com/code-sample-link

Answer 3

Answer №2

You cannot alter it with just one word. .contains will output true or false & .replace will substitute the entire 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>

Answer 4

You cannot alter it with just one word. .contains will output true or false & .replace will substitute the entire 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>

Answer 5

Answer №3

You have the option to utilize the Element.classList.toggle method.

function toggleStyle() {
  const element = document.getElementById("myDIV")

  element.classList.toggle('style1')
  element.classList.toggle('style2')
}

.style1 {
  background-color: black;
}

.style2 {
  background-color: blue;
}

<p>Click on the button to change the style class of the DIV element. The background-color will transition from black to blue (hopefully).</p>

<button onclick="toggleStyle()">Try it</button>

<div id="myDIV" class="style1">
  I am a DIV element
</div>

<script>
</script>

Answer 6

You have the option to utilize the Element.classList.toggle method.

function toggleStyle() {
  const element = document.getElementById("myDIV")

  element.classList.toggle('style1')
  element.classList.toggle('style2')
}

.style1 {
  background-color: black;
}

.style2 {
  background-color: blue;
}

<p>Click on the button to change the style class of the DIV element. The background-color will transition from black to blue (hopefully).</p>

<button onclick="toggleStyle()">Try it</button>

<div id="myDIV" class="style1">
  I am a DIV element
</div>

<script>
</script>

Answer 7

Answer №4

Utilizing data attributes is a simple way to achieve this task. By modifying the string within the data-class attribute and then resetting it as dataset, you can effectively change the class of elements.

const button = document.querySelector("button");
const boxes = document.querySelectorAll(".box");
let initial = true;
const checkClasses = () => {
  boxes.forEach(box => {
    let dataClass = box.dataset.class;
    if (initial) {
      let dataClass = box.dataset.class.split("1").join("");
      box.setAttribute('data-class', dataClass);
    }
  });
}
button.addEventListener("click", checkClasses);

body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div {
  height: 100px;
}

[data-class="my1blue"] {
  background: royalblue;
}

[data-class="myblue"] {
  background: blue;
}

[data-class="my1red"] {
  background: tomato;
}

[data-class="myred"] {
  background: red;
}

[data-class="my1green"] {
  background: olive;
}

[data-class="mygreen"] {
  background: green;
}

button {
  margin: 1rem;
}

<div data-class="my1blue" class="box"></div>
<div data-class="my1red" class="box"></div>
<div data-class="my1green" class="box"></div>

<button>click me</button>

Answer 8

Utilizing data attributes is a simple way to achieve this task. By modifying the string within the data-class attribute and then resetting it as dataset, you can effectively change the class of elements.

const button = document.querySelector("button");
const boxes = document.querySelectorAll(".box");
let initial = true;
const checkClasses = () => {
  boxes.forEach(box => {
    let dataClass = box.dataset.class;
    if (initial) {
      let dataClass = box.dataset.class.split("1").join("");
      box.setAttribute('data-class', dataClass);
    }
  });
}
button.addEventListener("click", checkClasses);

body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div {
  height: 100px;
}

[data-class="my1blue"] {
  background: royalblue;
}

[data-class="myblue"] {
  background: blue;
}

[data-class="my1red"] {
  background: tomato;
}

[data-class="myred"] {
  background: red;
}

[data-class="my1green"] {
  background: olive;
}

[data-class="mygreen"] {
  background: green;
}

button {
  margin: 1rem;
}

<div data-class="my1blue" class="box"></div>
<div data-class="my1red" class="box"></div>
<div data-class="my1green" class="box"></div>

<button>click me</button>

Answer 9

Answer №5

If you always know the value will be 1, you can utilize a contains selector to avoid looping through each element in the DOM

document.querySelectorAll("[class*='1']").forEach(elem => elem.classList.value = elem.classList.value.replace(/1/, ''));

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

Answer 10

If you always know the value will be 1, you can utilize a contains selector to avoid looping through each element in the DOM

document.querySelectorAll("[class*='1']").forEach(elem => elem.classList.value = elem.classList.value.replace(/1/, ''));

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

Answer 11

Answer №6

After reviewing the responses beforehand, I was able to devise a comprehensive solution that addresses the issue at hand:

<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>

<button onclick="myFunction()">Modify style class within DIV</button>
<div class="my1bla">This is a DIV element</div>

<script>
function myFunction() {
  var elems = document.body.getElementsByTagName("*");
for (i in elems) {
    ele = elems[i];
    if(ele.classList)
        ele.classList.value = ele.classList.value.replace("1", "");
};
}
</script>

Answer 12

After reviewing the responses beforehand, I was able to devise a comprehensive solution that addresses the issue at hand:

<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>

<button onclick="myFunction()">Modify style class within DIV</button>
<div class="my1bla">This is a DIV element</div>

<script>
function myFunction() {
  var elems = document.body.getElementsByTagName("*");
for (i in elems) {
    ele = elems[i];
    if(ele.classList)
        ele.classList.value = ele.classList.value.replace("1", "");
};
}
</script>

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

Utilize the power of jQuery to make an ajax request to a PHP backend, expecting a response in JSON format. Then,

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

The drop-down menu does not maintain its selected option after the window is refreshed

Unknown custom element error in Laravel and Vuetify

Combining HashRouter and anchor navigation in React: A guide to seamless page navigation

Checking with jQuery Validate: displaying an error message if input matches a certain value

Changing the background color completely

Condensed JQuery condition code for "if" statement

Incorporate a horizontally rotating preloader to enhance loading experience

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Guide on how to save the selected user option in a PHP form

Leverage Html5 to open and retrieve data from an Excel document

Tips for centering the second content within a div block

Modify HTML content according to the response received from the backend

Is it possible to apply a class without using ng-class?

Displaying Real-Time Values in ReactJS

Utilize Selenium with Eclipse (Java) to validate the CSS table border style

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

The table fails to refresh after adding, modifying, or removing a row