javascript - 如何使用 HTML 中的开关通过 onchange 更改 BACK

标签 javascript html css

我正在写一个网站,想创建一个深色/浅色模式。我有一个开关,单击时会切换,它成功更改为我的第二个 css 样式表。我应该如何切换回原始样式表?

HTML-

<link id="pagestyle" rel="stylesheet" type="text/css" href="assets/css/main.css">
<script>
  function swapStyleSheet(sheet) {
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/main2.css');
  }
</script>
<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox" onchange="swapStyleSheet()"">
    <span class=" slider"></span>
</label>

Using this switch style

最佳答案

请使用此代码,希望对您有所帮助。

 <link id="pagestyle" rel="stylesheet" type="text/css" href="main.css">
<script>
  function swapStyleSheet(sheet) {
    if($(sheet).prop("checked") == true){
       document.getElementById('pagestyle').setAttribute('href', 'main2.css');
    }else{
        document.getElementById('pagestyle').setAttribute('href', 'main.css');
    }

  }
</script>

<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox" onchange="swapStyleSheet(this)">
    <span class="slider"></span>
</label>

关于javascript - 如何使用 HTML 中的开关通过 onchange 更改 BACK,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56388791/

相关文章:

javascript - Angular 2 : trying to update ngModel with onModelChange inside the controller

html - 无法将我的数据放在居中的小灰色框中

html - 我的标题按钮是错误的方式,但在代码中是正确的方式?

javascript - 了解 ReactJS 受控表单组件

javascript - Font-Awesome 图标,带有 onclick 事件集

javascript - 使用JavaScript生成JavaScript生成内联样式时浏览器不一致

html - aria-labelledby 不适用于 NVDA/Firefox

css - 带有输入组的浏览按钮在 IE9 上被裁剪

javascript - 使用 Javascript 根据值动态更改颜色或文本

javascript - 根据下拉列表中的选择附加元素