Web/API/CSSStyleDeclaration 以下を更新 (#1482)

* Web/API/CSSStyleDeclaration/cssText を新規翻訳

2021/06/13 時点の英語版に基づき新規翻訳

* Web/API/CSSStyleDeclaration 以下を整備

Web/API/CSSStyleDeclaration 以下について、2021/07/10時点の内容に同期。未翻訳の記事については新規翻訳

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">&lt;div class="controls"&gt;
+  &lt;button class="border"&gt;Border&lt;/button&gt;
+  &lt;button class="bgcolor"&gt;Background&lt;/button&gt;
+  &lt;button class="color"&gt;Text&lt;/button&gt;
+&lt;/div&gt;
+&lt;div class="box"&gt;
+  &lt;p&gt;Box&lt;/p&gt;
+&lt;/div&gt;</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 &lt; 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>