Question

标题可能没有任何意义所以这就是正在发生的事情。我正在尝试运行一个onclick()函数来交换样式表以进行视觉更改。我这样做的方式是replace() href值的一部分。具体来说，我将单词白色更改为黑色，以便将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中，你这样做：

＆＃13;

＆＃13;

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

＆＃13;

Answer 2

您需要在最后添加()来执行该功能

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

setAttribute（）将函数文本设置为href值

2 个答案: