linkObject.hrefプロパティ

linkObject.hrefは、link要素(リンク要素)のhref属性の値を取得、もしくは、設定するプロパティ。

href属性には、リンク先を指定することができる。

構文

取得

var $href = $linkElementReference.href;

戻り値

link要素(リンク要素)のhref属性の値。

設定

$linkElementReference.href = "URL";
URL
リンク先URLを指定。

サンプル

変更後のhref属性の値:

サンプルの動作について

  • 「サンプルA」ボタンをクリックすると、「link要素サンプル」のhref属性値を「~sampleA.css」に設定し、サンプル全体の背景色を薄い赤色にする。「変更後のhrefプロパティの値:」の右横に「~sampleA.css」と表示する。
  • 「サンプルB」ボタンをクリックすると、「link要素サンプル」のhref属性値を「~sampleB.css」に設定し、サンプル全体の背景色を薄い緑色にする。「変更後のhrefプロパティの値:」の右横に「~sampleB.css」と表示する。
  • 「サンプルC」ボタンをクリックすると、「link要素サンプル」のhref属性値を「~sampleC.css」に設定し、サンプル全体の背景色を薄い青色にする。「変更後のhrefプロパティの値:」の右横に「~sampleC.css」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setHref( $href ) {
    var $elementReference = document.getElementById( "sampleLink" );
    $elementReference.href = $href;
    var $href = $elementReference.href;
    document.getElementById( "sampleOutput" ).innerHTML = $href;
}
</script>

HTML

<div id="sampleWrap">
    <button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css');">サンプルA</button>
    <button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleB.css');">サンプルB</button>
    <button onclick="setHref('http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleC.css');">サンプルC</button>
    <p>変更後のhref属性の値:<span id="sampleOutput"></span></p>
    <link id="sampleLink" type="text/css" rel="stylesheet" href="http://alphasis.info/wp-content/uploads/2013/11/javascript-dom-link-href-sampleA.css" />
</div>

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

スポンサード リンク

カテゴリー: DOM, JavaScript, Linkオブジェクト, リファレンス パーマリンク