javascript - setAttribute() 将函数的文本设置为 href 值

Question

标题可能没有任何意义，所以这就是发生的事情。我正在尝试运行 onclick()将交换样式表以进行视觉更改的函数。我这样做的方式是 replace() href的一部分值(value)。具体来说，我将单词 white 更改为 black，以更改 href 的值。来自styles-black.css到 styles-black.css。

我在 jQuery 中这样做没有任何问题:

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

});

我不是专家，所以这可能非常低效，但我仍在努力学习。现在，当我尝试使用 vanilla JS 复制这个时，我得到了一些奇怪的结果。首先，这是我的代码:

document.getElementById("pagestyle").setAttribute("href", (function(i,blackCss) {
        return blackCSS.replace("white", "black");
    }))

运行后，我用 document.getElementById('pagestyle').getAttribute('href'); 进行跟踪。检查 href 的值查看该功能是否有效并且......这就是我得到的:

"function (i,blackCss) {
        return blackCSS.replace("white", "black");
    }"

这是元素:

<link id="pagestyle" rel="stylesheet" type="text/css" href="function (i,blackCss) {&#10;            return blackCSS.replace(&quot;white&quot;, &quot;black&quot;);&#10;        }">

显然我做错了什么。奇怪的是，如果我不检查自己，我会认为它有效!风格发生变化。如果我使用 Chrome/IE 工具检查元素，我可以看到 styles-black.css 的样式正在被应用!但到底为什么它会在元素的属性中显示该功能呢？这不可能吧？当然，我对任何想要向我展示它是如何完成的人持开放态度。

编辑这是元素的初始状态:

<link id="pagestyle" rel="stylesheet" type="text/css" href='css/styles-white.css'>   

Answer 1

这是预期的，因为属性值只能是字符串，因此您的函数将转换为字符串。

在 vanilla-js 中你可以这样做:

var el = document.getElementById("pagestyle"),
    initial = el.getAttribute("href");
el.href = initial.replace("white", "black");

<link id="pagestyle" rel="stylesheet" type="text/css" href='css/styles-white.css'>