Estoy tratando de hacer que un botón de alternancia esté ACTIVADO de forma predeterminada cuando se carga la página web. Estoy usando la interfaz de usuario Fabric de Microsoft.
Cuando intento agregar is-selected a <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> , eliminará is-selected cuando comience la página. Sin embargo, puedo agregarlo más tarde a la etiqueta usando las herramientas de inspección en Chrome.
Aquí está el código que usé:
HTML
<div class="ms-Toggle"> <span class="ms-Toggle-description">Let apps use my location</span> <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" /> <label for="demo-toggle-3" class="ms-Toggle-field is-selected" tabindex="0"> <span class="ms-Label ms-Label--off">Off</span> <span class="ms-Label ms-Label--on">On</span> </label> </div>JavaScript
<script type="text/javascript"> var ToggleElements = document.querySelectorAll(".ms-Toggle"); for (var i = 0; i < ToggleElements.length; i++) { new fabric['Toggle'](ToggleElements[i]); } </script>Sin embargo, cuando se carga la página, sale así:
<div class="ms-Toggle"> <span class="ms-Toggle-description">Let apps use my location</span> <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" /> <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> <span class="ms-Label ms-Label--off">Off</span> <span class="ms-Label ms-Label--on">On</span> </label> </div>Gracias a @HereticMonkey pude resolver el problema agregando la clase is-selected al elemento de alternar después de que se haya creado. Como tengo varios conmutadores, usé un forloop así:
for (var i = 0; i < ToggleElements.length; i++) {ToggleElements[i].querySelector('.ms-Toggle-field').classList.add('is-selected')}