1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: CSSStyleDeclaration.setProperty()
slug: Web/API/CSSStyleDeclaration/setProperty
tags:
- API
- CSSOM
- Method
- Reference
browser-compat: api.CSSStyleDeclaration.setProperty
translation_of: Web/API/CSSStyleDeclaration/setProperty
---
<p>{{ APIRef("CSSOM") }}</p>
<p><span class="seoSummary"><strong><code>CSSStyleDeclaration.setProperty()</code></strong> メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。</span></p>
<h2 id="Syntax">構文</h2>
<pre
class="brush: js"><em>style</em>.setProperty(<em>propertyName</em>, <em>value, priority</em>);</pre>
<h3 id="Parameters">引数</h3>
<ul>
<li><em><code>propertyName</code></em> は {{domxref('DOMString')}} で、変更する CSS プロパティ名 (ハイフン区切り) です。</li>
<li><em><code>value</code></em> {{optional_inline}} は
{{domxref('DOMString')}} で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。
<ul>
<li>注: <em><code>value</code></em> は <code>"!important"</code> を含んではいけません。 --
これは <em><code>priority</code></em> 引数を使用して設定してください。</li>
</ul>
</li>
<li><em><code>priority</code></em> {{optional_inline}} は
{{domxref('DOMString')}} で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。
<ul>
<li>文字列値 <code>"important"</code></li>
<li>キーワード <code>undefined</code></li>
<li>空文字列値 <code>""</code></li>
</ul>
</li>
</ul>
<h3 id="Return_value">返値</h3>
<ul>
<li>{{jsxref('undefined')}}</li>
</ul>
<h3 id="Exceptions">例外</h3>
<ul>
<li>{{domxref('DOMException')}} (NoModificationAllowedError): このプロパティまたは宣言ブロックが読み取り専用であった場合。</li>
</ul>
<p><em><code>priority</code></em> が省略できる場合、 JavaScript にはスタイル宣言オブジェクトの CSS プロパティの設定に特別な簡単な構文があります。</p>
<pre class="brush: js"><em>style</em>.cssPropertyName = 'value';</pre>
<h2 id="Examples">例</h2>
<p>この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。</p>
<p>変更したい規則は、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 <code><a href="/ja/docs/Web/API/Document/styleSheetSets">document.styleSheets[1]</a></code> を使ってその参照を取得します。次に、 <code><a href="/ja/docs/Web/API/CSSStyleSheet/cssRules">stylesheet.cssRules</a></code> の配列に含まれている、スタイルシート内のさまざまな規則を反復処理します。それぞれの規則について、 <code><a href="/ja/docs/Web/API/CSSStyleRule/selectorText">CSSStyleRule.selectorText</a></code> プロパティがセレクター <code>.box p</code> と等しいかどうかを確認します。</p>
<p>等しい場合、この <code>CSSStyleRule</code> オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値で規則を更新します。それぞれの場合において、これは <code>setProperty()</code> メソッドで行います (<code>boxParaRule.style.setProperty('border', newBorder);</code> のように)。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: 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];
let boxParaRule;
for(let i = 0; i < stylesheet.cssRules.length; i++) {
if(stylesheet.cssRules[i].selectorText === '.box p') {
boxParaRule = stylesheet.cssRules[i];
}
}
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);</pre>
<h3 id="Result">結果</h3>
<p>{{EmbedLiveSample('Examples', '100%', 400)}}</p>
<h2 id="Specifications">仕様書</h2>
{{Specifications}}
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat}}</p>
|
