説明
下記は、syncerというID名をid属性に指定して、スタイルシートで青の背景色を適用した例です。このようにid属性は、スタイルシートで要素を対象にするためのフックになります。フックとは、何かに引っ掛ける留め金という意味です。
HTML
<p>今日は、心が<span id="syncer">とっても</span>愉快です…。</p>CSS
/* [syncer]というID名の要素の背景色を青にする */
#syncer {
background: #00f ;
}今日は、心がとっても愉快です…。
先ほどのsyncerというid属性値に、今度はJavaScriptのgetElementById()というメソッドを使ってアクセスし、背景色を緑に変更する例です。id属性は、JavaScriptでアクセスするためのキーワードになります。
JavaScript
// ID名が[syncer]の要素を取得
var element = document.getElementById( "syncer" ) ;
// 対象の背景色を緑に変更する
element.style.backgroundColor = "#008080" ;id属性は、ページ内リンクを実装する時のアンカーになります。目次や脚注などのコンテンツを作る時に有用ですね。例えば、下記のリンクをクリックすると、同じドキュメント内の、syncerというid属性が設定された要素の場所まで移動できます。
HTML
<p><a href="#syncer">ページ内リンク</a></p>複数設置してはいけない
ドキュメントに同じid属性を持った要素を複数設定することは文法違反です。ただ、設置してもブラウザ上で目立ったエラーが発生するわけではありません。スタイルシートはいずれの要素にも適用されます。JavaScript、ページ内リンクの場合は一番最初の要素が対象になります。
HTML
<p>今日は、心が<span id="sameid">とっても</span>愉快です…。</p>
<p>今日は、心が<span id="sameid">どんより</span>重いです…。</p>
<!-- [とっても]がアンカーになる -->
<p><a href="#sameid">ページ内リンク</a></p>CSS
/* 2つの要素ともに適用される */
#syncer {
color: #fff ;
background: #00f ;
}JavaScript
// ID名が[sameid]の要素を取得
var element = document.getElementById( "syncer" ) ;
// 一番最初の要素だけに有効
element.style.backgroundColor = "#008080" ;idとclassの違い
スタイルシートのフックになったり、JavaScriptでアクセスするためのキーワードになるという点で、id属性とclass属性は似た性質を持っています。ただし、id属性は一意の識別子であるのに対して、class属性は複数指定できる点、id属性はページ内リンクのアンカーになるのに対して、class属性はならない点で、両者には違いがあります。