如何使用HTML中的<button>在两个CSS文档之间切换

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (133)

我正在尝试在我的网页上使用黑暗主题和灯光主题,但我找不到用一个按钮切换它们的方法(因此第一次点击按钮会打开黑暗主题,第二次关闭它) 。我希望能够在不使用第三方JavaScript库的情况下完成此操作。我找到了一种方法来实现这个<option>元素,但这不是我想要的“切换按钮”:

  <button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
    <select id="select">
        <option>Dark Theme</option>
        <option>Revert To Original</option>
    </select>

function getTheme () {
    function changeTheme (Theme) {
        document.getElementById('style').setAttribute('href', Theme);
    }
    var index = document.getElementById("select").selectedIndex;
    switch (index) {
        case 0:
          changeTheme('css/dark.css');
          break;
          case 1: changeTheme('css/main.css');
    }
}

谢谢你的帮助!

提问于
用户回答回答于

另一种方法是使用布尔值。您可以在每次单击时更改布尔值。你可以用这个布尔值来切换css。

<button onclick=getTheme()>Click to use this theme.</button>

JS

var bool = true;
function getTheme() { 
  function changeTheme (theme) {
    document.getElementById('style').setAttribute('href', theme);
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  changeTheme(theme);
}

根据评论进行编辑

这确实很有效,但有没有办法使用document.getElementById(“themeToggle”)。innerHTML =“New text!”; 用这个来改变“暗主题”或“浅色主题”之间的按钮

您可以使用相同的逻辑,例如:

var bool = true;
function getTheme() { 
  function changeTheme (theme, text) {
    document.getElementById('style').setAttribute('href', theme);
    document.getElementById('themeToggle').innerText = text;
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  var text  = bool ? 'Dark theme' : 'Light theme';
  changeTheme(theme, text);
}
用户回答回答于

我知道这似乎有点业余,但你可以这样做,

<button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
<script>
var click = 0;
function getTheme()
{   
    click++;
    if(click%2 == 0)
        changeTheme('css/dark.css');
    else
        changeTheme('css/main.css');
}
</script>

并相应地更改按钮上的文本。如果有效,请告诉我。

扫码关注云+社区

领取腾讯云代金券