setAttribute（）は関数のテキストをhrefの値として設定しています

Question

タイトルはおそらく何も起こりませんでしたので、ここで何が起こっているのですか。私は視覚的な変化のためにスタイルシートを交換するonclick()関数を実行しようとしています。私がやっているやり方はreplace()部分のhrefです。具体的にはの白いをの黒のに変更して、の値をstyles-black.cssに変更します。

私はjQueryの問題なしでこれをやっている：

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

}）;

私は専門家ではないので、これは非常に非効率的かもしれませんが、私はまだ勉強しようとしています。 今、バニラJSを使ってこれを複製しようとすると、奇妙な結果が得られます。まず、ここに私のコードは次のとおりです。

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

私はそれを実行した後、私は機能が働いたと.....これは私が」とは何であるかどうかを確認するためにhrefの値をチェックするdocument.getElementById('pagestyle').getAttribute('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

で()を追加することで機能を実行する必要があります文字列なので、関数は文字列に変換されます。

あなたはこのようにそれを行うバニラ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'>

Answer 2

あなたは属性値ができるだけであるため、期待のエンド

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