JavaScript

基本構文

element.style.setProperty(propertyName, value);
element.style.setProperty(propertyName, value, priority);

propertyNameには"background-color"や"font-size"のように、CSSのプロパティ名をハイフン区切りの文字列で指定します。

setProperty()でスタイルを設定する

setPropertyメソッドは、要素のインラインスタイルにCSSプロパティと値を設定するためのメソッドです。

setPropertyメソッドは、取得した要素のstyleプロパティから呼び出し、指定したCSSプロパティ名と値を設定します。例えば、以下のように使用できます。

document.addEventListener("DOMContentLoaded", () => {
	const element = document.querySelector("#my-element");

	if (element !== null) {
		element.style.setProperty("color", "red");
	}
});

上記の例では、IDが my-element の要素を選択して、その colorプロパティを赤色に設定しています。

setPropertyメソッドでは、color、font-size、background-colorなどのCSSプロパティを文字列で指定できます。

element.style.setProperty()で設定した値は、要素のstyle属性にインラインスタイルとして反映されます。通常の外部スタイルシートより優先されますが、外部CSS側に!importantがある場合や、アニメーション・トランジションが関係する場合は結果が変わることがあります。

複数の値を持つプロパティを設定する

borderのように複数の値をまとめて書くCSSプロパティでも、第2引数のvalueにはCSSに書く値全体を1つの文字列として指定します。

const element = document.querySelector("#my-element");

if (element !== null) {
	element.style.setProperty("border", "2px solid red");
}

上記の例では、borderプロパティに2px solid redをまとめて指定し、太さ・線の種類・色を一度に設定しています。

element.style.setProperty("border", "2px", "solid")のように値を分けて書くと、"solid"は第3引数の priority として扱われます。"solid"は有効な priority ではないため、この指定ではborderは設定されません。

第3引数 important

第3引数の priority は、CSSの!importantフラグを設定するための引数です。"important"を指定すると!important付きで設定され、第3引数を省略するか、空文字列・undefined・nullを指定すると!importantなしで設定されます。値の文字列に"!important"を含めるのではなく、第3引数で指定します。

const element = document.querySelector("#my-element");

if (element !== null) {
	element.style.setProperty("color", "red", "important");
}

!important付きで設定する場合は、第3引数に"important"を指定します。"!important"のように感嘆符を含めた文字列や、true、falseなどは指定しません。

removeProperty()で削除する

設定したインラインスタイルを取り除くときは、removePropertyメソッドを使用します。

const element = document.querySelector("#my-element");

if (element !== null) {
	element.style.removeProperty("color");
}

removePropertyメソッドを実行すると、指定したインラインスタイルの宣言が削除され、外部スタイルシートやブラウザの既定スタイルなど、通常のカスケード結果が適用されます。