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>
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>
<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要素内に書く。