使“被选中”class成为启动的一部分

Question

I am trying to make a toggle button be ON by default when the webpage loads. I am using Microsoft's Fabric UI.

When I try to add is-selected to <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> it will remove the is-selected when the page starts. However, I can add it later to the tag by using the inspection tools in Chrome.

Here is the code I used:

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>

However when the page loads, it comes out like this:

<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>

Answer 1

Thanks to @HereticMonkey I was able to solve the issue by adding the is-selected class to the toggle element after its been created. Since I have multiple toggles, I used a forloop like so:

for (var i = 0; i < ToggleElements.length; i++) {ToggleElements[i].querySelector('.ms-Toggle-field').classList.add('is-selected')}