如何使用JavaScript在页面加载阶段修改切换按钮的开关状态

完全可以实现，不需要操作:before伪元素，你的切换开关状态本质和隐藏的checkbox的checked属性绑定，只需要修改该属性即可自动触发CSS样式更新。

方案1：服务端渲染直接设置（最优，无任何闪烁） #

如果你的页面是服务端渲染生成的，直接在输出HTML时根据数据库的用户配置，给checkbox加checked属性即可：

<!-- 用户开启了对应配置就加checked -->
<input type="checkbox" id="privacy-button" checked>
<!-- 没开启就不加 -->
<input type="checkbox" id="privacy-button">

这种方式在页面渲染初始就已经是正确状态，完全不需要额外JS执行。

方案2：前端JS在DOM解析完成前设置 #

如果是纯前端渲染的场景，不需要等DOMContentLoaded或者window.load这类页面加载完成的事件，直接把JS代码放在对应开关DOM的后面即可，浏览器从上到下解析HTML时，遇到这段JS时前面的开关元素已经加载到DOM树中，可以直接修改：

<label class="switch">
   <input type="checkbox" id="privacy-button">
   <span class="slider round"></span>
</label>
<script>
// 直接获取元素，不需要等待页面加载完成
const privacySwitch = document.getElementById('privacy-button');
// 这里替换成你从接口/本地存储拿到的用户配置值
const userConfigEnablePrivacy = true;
privacySwitch.checked = userConfigEnablePrivacy;
</script>

如果需要从后端接口拉取用户配置，可以在页面head标签内就提前发起接口请求缓存结果，等DOM解析到开关位置时直接用缓存的结果赋值，进一步降低延迟避免状态闪烁。

内容的提问来源于stack exchange，提问作者salesp07