jQueryを使い、link要素で読み込んでいる外部スタイルシートのファイルを、ボタンクリック操作で変更する方法。
実装例
実装例の動作について
- 「sampleA.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い赤色にする。
- 「sampleB.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い緑色にする。
- 「sampleC.css」ボタンをクリックすると、ボタンがあるdiv要素の背景色を薄い青色にする。
ソースコード
JavaScript
<script type="text/javascript">
function setHref( $href ) {
jQuery( '#sampleLink' ).attr( 'href', $href );
}
</script>
function setHref( $href ) {
jQuery( '#sampleLink' ).attr( 'href', $href );
}
</script>
主に使用しているAPI
HTML
<link id="sampleLink" type="text/css" rel="stylesheet" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css" />
<div id="sampleWrap" style="height: 10em;">
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css');">sampleA.css</button>
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleB.css');">sampleB.css</button>
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleC.css');">sampleC.css</button>
</div>
<div id="sampleWrap" style="height: 10em;">
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css');">sampleA.css</button>
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleB.css');">sampleB.css</button>
<button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleC.css');">sampleC.css</button>
</div>
このサンプルでは、body要素内にlink要素を書いてしまってるが、本来は、head要素内に書く。