Estoy tratando de construir una aplicación web simple donde el usuario pueda personalizar su configuración. En la página de configuración tengo algunos botones de alternar, por lo que necesito cambiar el estado del botón durante la carga de la página para que coincida con las preferencias que tenemos en la base de datos.
El CSS del botón de alternar usa un: antes del pseudoselector (código a continuación), entonces, ¿hay alguna manera de cambiar el estado del botón con javascript antes de que se cargue la página? Gracias
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } <label class="switch"> <input type="checkbox" id="privacy-button"> <span class="slider round"></span> </label>