読み込んでいる外部スタイルシートを変更するjQuery

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>

主に使用している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>

このサンプルでは、body要素内にlink要素を書いてしまってるが、本来は、head要素内に書く。

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, スタイルシート, 逆引き パーマリンク