How to Change CSS Content using IF Statement in Javascript

While it's possible to dynamically change CSS, a better approach would be to just set up the initial rules properly. For example, you could toggle a class to produce a new :before content.

.switch-button:before {
    content: "OFF";
    color: #ffffff;
    ....
}
.switch-button.on:before {
    content: "ON";
}

And then just do

for (const input of document.querySelectorAll('.switch-button-checkbox')) {
  input.addEventListener('change', (e) => {
    input.parentElement.classList.toggle('on', e.checked);
  });
}

for (const input of document.querySelectorAll('.switch-button-checkbox')) {
  input.addEventListener('change', (e) => {
    input.parentElement.classList.toggle('on', e.checked);
  });
}

.switch-button:before {
  content: "OFF";
}

.switch-button.on:before {
  content: "ON";
}

<div class="switch-button">
  <input class="switch-button-checkbox" type="checkbox">
</div>

How to Change CSS Content using IF Statement in Javascript

Related

Recent Posts