JavaScript

役割

removeProperty() は、element.style などのCSS宣言から、指定したCSSプロパティだけを削除するメソッドです。

一時的に変えた見た目を解除して、CSSファイルやクラスで定義した状態へ戻したいときに使います。

構文

const oldValue = element.style.removeProperty("background-color");

property

削除したいCSSプロパティ名を文字列で渡します。

戻り値

削除前に設定されていた値を文字列で返します。

最小例

<button type="button" id="resetButton">背景色を戻す</button>
<div id="box" style="background-color: tomato;">色が付いた要素</div>

const box = document.querySelector("#box");
const resetButton = document.querySelector("#resetButton");

resetButton.addEventListener("click", () => {
	const oldValue = box.style.removeProperty("background-color");
	console.log(oldValue);
});

クリックすると、style 属性内の background-color だけが消えます。

プロパティ名の書き方

引数には、JavaScriptのプロパティ名ではなくCSSのプロパティ名を渡します。

box.style.removeProperty("background-color");

誤った指定例です。

box.style.removeProperty("backgroundColor");

backgroundColor の形ではなく、background-color の形で書きます。

注意点

• 削除するのは指定したCSS宣言だけで、要素そのものは削除しません。
• CSSファイルやクラスの指定が残っている場合、見た目はその指定に戻ります。
• getComputedStyle() は計算後の値を読むためのものなので、変更対象にしません。
• 読み取り専用のCSS宣言を変更しようとすると、NoModificationAllowedError が発生することがあります。

実務での使いどころ

フォームのエラー色、選択中の強調表示、ユーザー操作後の一時的なスタイルを解除するときに使います。

const message = document.querySelector("#message");

message.style.setProperty("color", "red");
message.style.removeProperty("color");

試験での確認点

• removeProperty() はCSSOMのAPIです。
• 戻り値は削除前の値で、undefined ではありません。
• 複数語のCSSプロパティ名は、font-size のようにハイフン付きで渡します。
• style.backgroundColor = ""; でもインライン指定を消せますが、指定したCSS宣言を削除する意図は removeProperty() の方が明確です。

FAQ

removeProperty() は何を削除しますか？

CSSStyleDeclarationから、指定したCSSプロパティの宣言だけを削除します。

backgroundColor の形で指定できますか？

removeProperty() の引数には、background-color のようなCSSプロパティ名を渡します。