linkObject.relは、link要素(リンク要素)のrel属性の値を取得、もしくは、設定するプロパティ。
rel属性には、現在のドキュメントとリンク先ドキュメントとの関係を指定することができる。
構文
取得
var $rel = $linkElementReference.rel;
戻り値
link要素(リンク要素)のrel属性の値。
設定
$linkElementReference.rel = relationship;
- relationship
- 現在のドキュメントとリンク先ドキュメントとの関係を指定。
- rel属性の仕様に定義されている値:
alternate
:現在のドキュメントの代替。例えば、印刷用ページや翻訳ページなど。author
:現在のドキュメントの著者。bookmark
:関連ドキュメント。link要素(リンク要素)には指定できない。help
:ヘルプドキュメント。icon
:アイコン。license
:著作権ライセンス。next
:次のドキュメント。nofollow
:検索エンジンの巡回ロボットにリンク先ドキュメントを追跡させない。link要素(リンク要素)には指定できない。noreferrer
:リファラ情報(リンク元ドキュメントの情報)を送らない。link要素(リンク要素)には指定できない。prefetch
:リンク先ドキュメントを前もってキャッシュする。prev
:前のドキュメント。search
:現在のドキュメントとその関連ドキュメントの検索に有効なリソースへのリンク。stylesheet
:外部スタイルシートを読み込む。tag
:現在のドキュメント用のタグ。link要素(リンク要素)には指定できない。
サンプル
変更後のrel属性の値:
サンプルの動作について
- 「prev」ボタンをクリックすると、「link要素サンプル」のrel属性値を「prev」に設定する。「変更後のrelプロパティの値:」の右横に「prev」と表示する。
- 「next」ボタンをクリックすると、「link要素サンプル」のrel属性値を「next」に設定する。「変更後のrelプロパティの値:」の右横に「next」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setRel( $rel ) {
var $elementReference = document.getElementById( "sampleLink" );
$elementReference.rel = $rel;
var $rel = $elementReference.rel;
document.getElementById( "sampleOutput" ).innerHTML = $rel;
}
</script>
function setRel( $rel ) {
var $elementReference = document.getElementById( "sampleLink" );
$elementReference.rel = $rel;
var $rel = $elementReference.rel;
document.getElementById( "sampleOutput" ).innerHTML = $rel;
}
</script>
HTML
<button onclick="setRel('prev');">prev</button>
<button onclick="setRel('next');">next</button>
<p>変更後のrel属性の値:<span id="sampleOutput"></span></p>
<link id="sampleLink" href="sample.html" rel="next" />
<button onclick="setRel('next');">next</button>
<p>変更後のrel属性の値:<span id="sampleOutput"></span></p>
<link id="sampleLink" href="sample.html" rel="next" />
このサンプルでは、body要素内にlink要素を書いてしまってるが、本来は、head要素内に書く。