CSSStyleDeclaration.setProperty()
CSSStyleDeclaration.setProperty()
メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。
構文
setProperty(propertyName, value)
setProperty(propertyName, value, priority)
引数
propertyName
-
文字列で、変更する CSS プロパティ名(ハイフン区切り)です。
value
省略可-
文字列で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。
メモ:
value
が"!important"
を含むことはできません。これはpriority
引数を使用して設定してください。 priority
省略可-
文字列で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。
- 文字列値
"important"
- キーワード
undefined
- 空文字列値
""
- 文字列値
返値
なし (undefined
)。
例外
NoModificationAllowedError
DOMException
-
このプロパティまたは宣言ブロックが読み取り専用であった場合。
代替手段
priority
が省略できる場合、JavaScript にはスタイル宣言オブジェクトの CSS プロパティを設定する特別な簡単な構文があります。
style.cssPropertyName = "value";
例
この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。
変更したいルールは、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 document.styleSheets[1]
を使ってその参照を取得します。次に、 stylesheet.cssRules
の配列に含まれている、スタイルシート内のさまざまなルールを反復処理します。それぞれのルールについて、 CSSStyleRule.selectorText
プロパティがセレクター .box p
と等しいかどうかを確認します。
等しい場合、この CSSStyleRule
オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値でルールを更新します。それぞれの場合において、これは setProperty()
メソッドで行います(boxParaRule.style.setProperty('border', newBorder);
のように)。
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
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
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