JavaScriptやjQueryでのCSSの追加方法【現役エンジニアが解説】
今回は、JavaScriptやjQueryでのCSSの追加方法について、クラス追加の場合とスタイル適用の場合に分け、簡単に解説していきます。
JavaScriptでクラスを追加
要素のclassListのaddメソッドでクラスを追加できます。
CSSでクラスを用意している場合はクラスの追加でCSSが追加可能です。
document.getElementById("hogeid").classList.add("hogeclass");
上記のコードでは、hogeidのidの要素に、hogeclassのクラスを追加しています。
JavaScriptでスタイルを適用
要素のstyleのプロパティで直接スタイルを適用することも可能です。
styleプロパティ全体でも個別のプロパティ単位でも適用することができます。
document.getElementById("hogeid").style.color = "red"; // colorのみ
// document.getElementById("hogeid").style = "color:red"; // スタイル全体
上記のコードでは、hogeidというidの要素に対し、要素内の文字色を赤色にしています。
jQueryでクラス追加やスタイル適用
jQueryが使える場合はaddClassメソッドを使ってクラスを追加しましょう。
スタイルを直接適用する場合でも、cssメソッドを使用して適用すると良いでしょう。
$("#hogeid").addClass("hogeclass"); // クラスの追加
$("#hogeid").css({'color':'green','background-color':'blue'}); // スタイルの適用
上記のコードでは、hogeidというidを持つ要素に対して、jQueryでクラスの追加やスタイルの適用を行っています。