Estoy tratando de mostrar ON y OFF de la parte CSS del código según el valor dado en la base de datos. Lo que quiero saber es cómo edito el contenido del CSS a continuación (.switch-button:before) para cambiarlo a ON u OFF.
Intenté darle a cada elemento una ID y usar document.getElementById para ello, pero aún no funciona.
La parte en círculo es lo que quiero cambiar según el valor de la base de datos. Actualmente, su valor predeterminado (el contenido en CSS) está establecido en "DESACTIVADO".
CSS
.switch-button:before { content: "OFF"; color: #ffffff; position: absolute; top: 0; bottom: 0; right: 0; width: 60px; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; }HTML
<div id="turned_onclass" class="turned_onclass" style="display: none;"> <center><label><u>On/Off</u></label></center> <div class="switch-button"> <input class="switch-button-checkbox" type="checkbox"></input> <label class="switch-button-label" for=""> <span id="turned_onspan" value="<%= devices.turned_on %>" class="switch-button-label-span">ON</span> </label> </div> </div>JavaScript
<script> /* Button Displays ON/OFF depending on Value */ var turned_onTypeDocument = document.getElementById("turned_onspan"); var turned_onType = turned_onTypeDocument.getAttribute("value"); if (turned_onType == 1) { document.getElementById("turned_onspan").innerHTML = "ON"; document.getElementById("turned_onspan").style.content = "OFF"; } if (turned_onType == 0) { document.getElementById("turned_onspan").innerHTML = "OFF"; var turned_onClassContent = document.getElementsByClassName("switch-button-label-span"); turned_onClassContent.style.content = "ON"; } /////////////////////////////////////////////// </script>Si bien es posible cambiar dinámicamente el CSS, un mejor enfoque sería configurar las reglas iniciales correctamente. Por ejemplo, podría alternar una clase para producir un nuevo contenido :before .
.switch-button:before { content: "OFF"; color: #ffffff; .... } .switch-button.on:before { content: "ON"; }y luego hazlo
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>