From 52c12c1c3a8a92091f5caadf2cd1cc632b345d39 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 18 Jul 2021 23:58:20 +0900 Subject: Web/API/CSSStyleDeclaration 以下を更新 (#1482) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/API/CSSStyleDeclaration/cssText を新規翻訳 2021/06/13 時点の英語版に基づき新規翻訳 * Web/API/CSSStyleDeclaration 以下を整備 Web/API/CSSStyleDeclaration 以下について、2021/07/10時点の内容に同期。未翻訳の記事については新規翻訳 --- .../api/cssstyledeclaration/setproperty/index.html | 180 +++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/ja/web/api/cssstyledeclaration/setproperty/index.html (limited to 'files/ja/web/api/cssstyledeclaration/setproperty') 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 +--- +

{{ APIRef("CSSOM") }}

+ +

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

+ +

構文

+ +
style.setProperty(propertyName, value, priority);
+ +

引数

+ + + +

返値

+ + + +

例外

+ + + +

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];
+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);
+ +

結果

+ +

{{EmbedLiveSample('Examples', '100%', 400)}}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

-- cgit v1.2.3-54-g00ecf