JavaScriptで要素を選択してCSSを追加する方法のメモ

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

本日はJavaScriptでhtml要素やidやclassが振られたCSSを取得する方法をご紹介いたします。実行タイミングを決めてどんな状況で動かすか指定すればコントロールに使えるはずです。ぜひご参考くださいませ。

JavaScriptで要素を選択してCSSを追加する方法のメモ
- ・特定のhtml要素を取得する方法
- ・取得した要素に対してCSSを追加する方法
まとめ

JavaScriptで要素を選択してCSSを追加する方法のメモ

基準となるhtmlは下記です。記述はjQueryではなく素のJavaScriptとしています。

<!DOCTYPE html>
<head>
</head>
<html>
<body>
	<div>
		<h1>見出し１</h1>
		<p id="idName" class="className">本文</p>
	</div>
</body>
</html>

・特定のhtml要素を取得する方法

まずは取得方法をまとめておきます。

１. htmlを直接指定して要素を取得

document.getElementsByTagName('h1');

２. idを指定してhtml要素を取得

document.getElementById('idName');

３. classを指定してhtml要素を取得

document.getElementsByClassName('className');

・取得した要素に対してCSSを追加する方法

次にCSSの追記方法をまとめておきます。

１. 取得したhtml要素にclassを追加

// h1タグにclassで「classSample」を付与
let elm = document.getElementsByTagName("h1");
Array.prototype.forEach.call(elm, function (element) {
	element.classList.add("classSample");
});

２. id付きのタグにclassを追加

// idNameを持つタグにclassで「classSample」を付与
document.getElementById("idName").classList.add("classSample");

３. class付きのタグにclassを追加

// classNameを持つタグにclassで「classNameTest」を付与
let elm = document.getElementsByClassName("className");
Array.prototype.forEach.call(elm, function (element) {
	element.classList.add("classNameTest");
});

まとめ

本日は「JavaScriptのCSS追加方法」を解説させていただきました。

ポイントとして「JavaScriptはhtmlが存在する前に記述すると動かない」のでその点だけ注意が必要です。htmlの構文ではhead内で読み込ませずにbodyの終了タグ直前へ書くことで正しく認識できます。JavaScriptはどのタイミングで実行されているかをシビアに判定するといった特徴を持っているのでよく覚えておきましょう。

<!DOCTYPE html>
<head>
</head>
<html>
<body>
	<div>
		<h1>見出し１</h1>
		<p id="idName" class="className">本文</p>
	</div>
	<script>
	// JavaScriptを追加する
	document.getElementById("idName").classList.add("classSample");
	</script>
</body>
</html>

状況に応じてCSSをコントロールする場合はぜひご参考くださいませ。