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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

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

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

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

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

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

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

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

document.getElementsByTagName('h1');

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

document.getElementById('idName');

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

document.getElementsByClassName('className');

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

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

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

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

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

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

3. 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>見出し1</h1>
		<p id="idName" class="className">本文</p>
	</div>
	<script>
	// JavaScriptを追加する
	document.getElementById("idName").classList.add("classSample");
	</script>
</body>
</html>

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください