
WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。
本日は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してお試しくださいませ。
→ 改良されたプラグインを確認する