diff options
Diffstat (limited to 'files/ja/web/api/cssstyledeclaration/setproperty')
| -rw-r--r-- | files/ja/web/api/cssstyledeclaration/setproperty/index.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/files/ja/web/api/cssstyledeclaration/setproperty/index.html b/files/ja/web/api/cssstyledeclaration/setproperty/index.html new file mode 100644 index 0000000000..68628b771d --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/setproperty/index.html @@ -0,0 +1,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> |