CSSStyleDeclaration.setProperty()

CSSStyleDeclaration.setProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。

構文

js
setProperty(propertyName, value)
setProperty(propertyName, value, priority)

引数

propertyName

文字列で、変更する CSS プロパティ名（ハイフン区切り）です。

value 省略可

文字列で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。

メモ: value が "!important" を含むことはできません。これは priority 引数を使用して設定してください。

priority 省略可

文字列で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。

  • 文字列値 "important"
  • キーワード undefined
  • 空文字列値 ""

返値

なし (undefined)。

例外

NoModificationAllowedError DOMException

このプロパティまたは宣言ブロックが読み取り専用であった場合。

代替手段

priority が省略できる場合、JavaScript にはスタイル宣言オブジェクトの CSS プロパティを設定する特別な簡単な構文があります。

js
style.cssPropertyName = "value";

例

この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。

変更したいルールは、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 document.styleSheets[1] を使ってその参照を取得します。次に、 stylesheet.cssRules の配列に含まれている、スタイルシート内のさまざまなルールを反復処理します。それぞれのルールについて、 CSSStyleRule.selectorText プロパティがセレクター .box p と等しいかどうかを確認します。

等しい場合、この CSSStyleRule オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値でルールを更新します。それぞれの場合において、これは setProperty() メソッドで行います（boxParaRule.style.setProperty('border', newBorder); のように）。

HTML

html
<div class="controls">
  <button class="border">Border</button>
  <button class="bgcolor">Background</button>
  <button class="color">Text</button>
</div>
<div class="box">
  <p>Box</p>
</div>

CSS

css
html {
  background: orange;
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

div button {
  flex: 1;
  margin: 20px;
  height: 30px;
  line-height: 30px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 70px);
}

.box p {
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  height: 150px;
  line-height: 150px;
  background: red;
  border: 5px solid purple;
  color: white;
  transition: all 1s;
}

JavaScript

js
const borderBtn = document.querySelector(".border");
const bgColorBtn = document.querySelector(".bgcolor");
const colorBtn = document.querySelector(".color");
const box = document.querySelector(".box");

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function randomColor() {
  return `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`;
}

const stylesheet = document.styleSheets[1];
const boxParaRule = [...stylesheet.cssRules].find(
  (r) => r.selectorText === ".box p",
);

function setRandomBorder() {
  const newBorder = `${random(1, 50)}px solid ${randomColor()}`;
  boxParaRule.style.setProperty("border", newBorder);
}

function setRandomBgColor() {
  const newBgColor = randomColor();
  boxParaRule.style.setProperty("background-color", newBgColor);
}

function setRandomColor() {
  const newColor = randomColor();
  boxParaRule.style.setProperty("color", newColor);
}

borderBtn.addEventListener("click", setRandomBorder);
bgColorBtn.addEventListener("click", setRandomBgColor);
colorBtn.addEventListener("click", setRandomColor);

結果

仕様書

Specification
CSS Object Model (CSSOM)
# dom-cssstyledeclaration-setproperty

ブラウザーの互換性

BCD tables only load in the browser