HTMLのid【現役エンジニアが解説】

PROGRAM

今回は、HTMLのidについて、idの付け方とCSSやJavaScriptでの使い方に分け、簡単に解説していきます。

idの付け方

要素にidを付けるには、id属性を指定します。

なお、id属性はclass属性とは異なり、一意な値を指定する必要があります。

<input type="text" id="hoge">hoge</div>

上記のコードでは、あるinputの要素に対し、hogeというidを付け、CSS等から特定できるようにしています。

idのCSSからの使い方

HTMLでidを付けた要素に対しては、CSSからスタイルを適用できます。

HTMLでidを持つ要素は、”#id名”でCSSからスタイルを適用することができます。

#hoge{
    padding: 2px;
    color: blue;
}

上記のコードでは、hogeというidを持つ要素に対し、2ピクセルの余白を与え、文字色を青色に変更しています。

idのJavaScriptからの使い方

HTMLでidを付けた要素に対しては、JavaScriptから操作することができます。

JavaScriptでは、document.getElementByIdメソッド等で指定したidを持つ要素を特定できます。

var hoge = document.getElementById("hoge");
console.log(hoge.value);

上記のコードでは、hogeというidを持つ要素を取得し、それがinput要素である前提で、value属性の値(入力値)をログに出力しています。