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