Javascript 如果/否则 & setAttribute

Question

请注意，我是一个初学者，所以在考虑太多我为什么以这种特殊方式做我正在做的事情之前，我只是想澄清一下，我只是在练习和试图掌握我能做什么和不能做什么，编写函数和使用方法。当然，我愿意接受这样的建议，我只是不想让任何人过于相信我正在以可能不是最好的方式做某事这一事实。关于这个问题。

总而言之，我正在尝试编写一些 JS 来交换 CSS 文件以更改网站上的主题。

这是 HTML:

<div onclick="swapStyleSheet('css/styles-black.css')" class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>

下面的代码似乎可以工作:

function swapStyleSheet(sheet){
  if  (document.getElementById('pagestyle').getAttribute('href') == "css/styles-white.css") {
    document.getElementById('pagestyle').setAttribute('href', "css/styles-black.css");
  }
}

我会注意到，无论我直接设置“css/styles-black.css”还是通过函数调用传递参数(如 HTML 中所示)，这都有效。

为了从 styles-black.css 切换回 styles-white.css，我添加了一个 else 语句:

function swapStyleSheet(sheet){
  if  (document.getElementById('pagestyle').getAttribute('href') == "css/styles-white.css") {
    document.getElementById('pagestyle').setAttribute('href', "css/styles-black.css");
  } else {
    document.getElementById('pagestyle').setAttribute('href', "css/styles-white.css");
  }
}

这行不通，我正在尝试找出原因。默认情况下，它设置为使用 styles-white.css 样式。我错过了什么？我觉得这是 [初学者] 容易忽视的小事情之一。

提前致谢。

Answer 1

我能够使用 jQuery 完成这项工作:

$(".onoffswitch").click(function(){
    if($('.onoffswitch-checkbox').is(':checked') == false) {
        $("#pagestyle").attr("href", "css/styles-black.css");
    } else if ($('.onoffswitch-checkbox').is(':checked') == true) {
        $("#pagestyle").attr("href", "css/styles-white.css");
    }
})

我还能够以不同的方式使 href 不那么具体，因为我意识到并不是每个页面都以 css/styles-white.css 合适的方式定位:

$(".onoffswitch").click(function(){
    if($('.onoffswitch-checkbox').is(':checked') == false) {            
        $("#pagestyle").attr('href', function(i, blackCSS) {
            return blackCSS.replace('white', 'black');                
        });            
    } 
});

我仍然想弄清楚如何让它与 vanilla JS 一起工作。我确定这是我做错的事情。不过，我很高兴能够找到某种解决方案，