HTML要素に直接スタイルを設定する

HTML要素にインラインCSSを適用する

特定のHTML要素にJavaScriptで直接CSSを適用したいときは、styleプロパティにCSSプロパティ名と値を指定して設定します。

今回は解説用に以下のHTMLコードを使って、HTML要素にCSSを適用していきます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1">テキストテキストテキスト</p>
</article>

以下の例では、上記のHTMLコードからarticle要素とp要素を取得し、それぞれにCSSを適用します。

JS コード例

// HTML要素を取得
let article_element = document.querySelector("article");
let p1_element = document.getElementById("p1");

// article要素にCSSを適用
article_element.style.padding = "20px";
article_element.style.backgroundColor = "#ccc";

// p要素にCSSを適用
p1_element.style.color = "red";
p1_element.style.fontSize = "150%";
p1_element.style.paddingLeft = "100px";

このコードを実行すると、以下のようにHTML要素へインラインCSSが追記されます。

HTML コード例

<article style="padding: 20px; background-color: rgb(204, 204, 204);">
	<h1>JavaScriptレシピ</h1>
	<p id="p1" style="color: red; font-size: 150%; padding-left: 100px;">テキストテキストテキスト</p>
</article>

CSSのプロパティ名が「font-size」や「padding-left」のように途中に「–」が入る場合は、2つ目の単語の頭文字を大文字にして「fontSize」や「paddingLeft」のように記述します。
設定する値はCSSに記述するものと同じ形で指定することができます。

メソッドでCSSを適用する

styleプロパティによるCSSの適用はsetPropertyメソッドからも行うことができます。
以下の例はp要素に対してsetPropertyメソッドでCSSを適用します。

JS コード例

// HTML要素を取得
let p1_element = document.getElementById("p1");

// p要素にCSSを適用
p1_element.style.setProperty("background-color", "#c00");

setPropertyメソッドは第1パラメータにCSSプロパティ名、第2パラメータに値を指定します。
もし優先してCSSを適用する「!important」を指定したいときは、第3パラメータに「"important"」を指定してください。

JS コード例

// HTML要素を取得
let p1_element = document.getElementById("p1");

// p要素にCSSを適用
p1_element.style.setProperty("background-color", "#c00", "important");

このコードを実行すると、HTMLコードには以下のようにインラインCSSが追記されます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p id="p1" style="background-color: rgb(204, 0, 0) !important;">テキストテキストテキスト</p>
</article>

setPropertyメソッドではCSSプロパティ名を指定するときはCSSと同じ記述が使えるため、2つ目の単語の頭文字を大文字にする必要はありません。
また、先ほどの方法とどちらもインラインCSSで適用するため、CSSを適用する優先度は等しくなります。

適用されたCSSを解除する

styleプロパティはCSSの適用のみでなく、プロパティかremovePropertyメソッドを使って解除することができます。
以下の例はstyleプロパティでCSSを適用した後に、removePropertyメソッドを実行してCSSを解除します。

JS コード例

// HTML要素を取得
let p1_element = document.getElementById("p1");

// p要素にCSSを適用
p1_element.style.color = "red";
p1_element.style.fontSize = "150%";
p1_element.style.paddingLeft = "100px";

// p要素のCSSを削除
p1_element.style.removeProperty("color");
p1_element.style.removeProperty("padding-left");

removePropertyメソッドはパラメータにCSSプロパティ名を指定しますが、このメソッドもsetPropertyメソッドと同様にCSSと同じ記述を使うことができます。
例えば、「padding-left」は「paddingLeft」ではなく、そのまま「padding-left」と指定します。

以下の例はremovePropertyメソッドを使わずに、styleプロパティとプロパティを組み合わせてCSSの適用を解除します。
プロパティへ入れる値は「""（空文字）」と「null」のどちらを使っても解除することができます。

JS コード例

// HTML要素を取得
let p1_element = document.getElementById("p1");

// p要素にCSSを適用
p1_element.style.color = "red";
p1_element.style.fontSize = "150%";
p1_element.style.paddingLeft = "100px";

// p要素のCSSを削除
p1_element.style.color = "";
p1_element.style.paddingLeft = null;

プロパティ名とメソッドを使う方法は形式が異なりますが同じことができます。
そのため、使いやすい方法を選ぶという方針で大丈夫です。
（CSSと同じプロパティの記述方法が慣れているからメソッド形式を使う、など）