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/cssfloat/index.html | 47 ++++++ .../web/api/cssstyledeclaration/csstext/index.html | 36 +++++ .../getpropertycssvalue/index.html | 66 ++++---- .../getpropertypriority/index.html | 47 ++++++ .../getpropertyvalue/index.html | 58 +++---- files/ja/web/api/cssstyledeclaration/index.html | 108 +++++-------- .../ja/web/api/cssstyledeclaration/item/index.html | 50 ++++++ .../web/api/cssstyledeclaration/length/index.html | 43 +++++ .../api/cssstyledeclaration/parentrule/index.html | 38 +++++ .../cssstyledeclaration/removeproperty/index.html | 53 ++++++ .../api/cssstyledeclaration/setproperty/index.html | 180 +++++++++++++++++++++ 11 files changed, 580 insertions(+), 146 deletions(-) create mode 100644 files/ja/web/api/cssstyledeclaration/cssfloat/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/csstext/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/item/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/length/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/parentrule/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/removeproperty/index.html create mode 100644 files/ja/web/api/cssstyledeclaration/setproperty/index.html (limited to 'files/ja/web') diff --git a/files/ja/web/api/cssstyledeclaration/cssfloat/index.html b/files/ja/web/api/cssstyledeclaration/cssfloat/index.html new file mode 100644 index 0000000000..a95cca1f9d --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/cssfloat/index.html @@ -0,0 +1,47 @@ +--- +title: CSSStyleDeclaration.cssFloat +slug: Web/API/CSSStyleDeclaration/cssFloat +tags: + - API + - CSSOM + - CSSStyleDeclaration + - Reference +browser-compat: api.CSSStyleDeclaration.cssFloat +translation_of: Web/API/CSSStyleDeclaration/cssFloat +--- +
{{APIRef("CSSOM")}}
+ +

cssFloat は {{domxref("CSSStyleDeclaration")}} インターフェイスのプロパティで、 {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} を float を引数として呼び出したときの結果を返します。

+

設定したときは、 {{DOMxRef("CSSStyleDeclaration.setProperty()")}} を float を第一引数、指定された値を第二引数として呼び出します。指定された値は {{cssxref("float")}} プロパティで有効な値でなければなりません。

+ +

構文

+ +
var float = CSSStyleDeclaration.cssFloat();
+CSSStyleDeclaration.cssFloat = "right"
+ +

値

+

{{domxref('CSSOMString')}} です。

+ +

例

+ +

以下の例では、スタイルシートには、 1 つだけのルール .box に {{cssxref("float")}} プロパティの値が left と設定されています。この値は cssFloat から返されます。次に、 cssFloat を使用して値を "right" に設定し、新しい値を返します。

+ +
.box {
+  float: left;
+  inline-size: 300px;
+}
+
+ +
let myRules = document.styleSheets[0].cssRules;
+let rule = myRules[0];
+console.log(rule.style.cssFloat); // "left"
+rule.style.cssFloat = "right";
+console.log(rule.style.cssFloat); //right
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/csstext/index.html b/files/ja/web/api/cssstyledeclaration/csstext/index.html new file mode 100644 index 0000000000..33cb0c7d90 --- /dev/null +++ b/files/ja/web/api/cssstyledeclaration/csstext/index.html @@ -0,0 +1,36 @@ +--- +title: CSSStyleDeclaration.cssText +slug: Web/API/CSSStyleDeclaration/cssText +tags: + - API + - CSSOM + - NeedsSpecTable + - Reference +browser-compat: api.CSSStyleDeclaration.cssText +translation_of: Web/API/CSSStyleDeclaration/cssText +--- +
{{APIRef("CSSOM")}}
+ +

cssText は {{domxref("CSSStyleDeclaration")}} インターフェイスのプロパティで、その要素のインラインスタイル宣言のみのテキストを返したり設定したりします。スタイルシートの規則を動的に設定するためには、動的なスタイル情報の利用を参照してください。

+ +

スタイルシートのスタイル規則である {{domxref("CSSRule.cssText")}} と混同しないようにしてください。

+ +

例

+ +
<span id="s1" style="color: red;">
+  Some text
+</span>
+
+<script>
+  var elem = document.getElementById("s1");
+  alert(elem.style.cssText); // "color: red;"
+</script>
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html index f3ce66652d..4889ed135a 100644 --- a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html +++ b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html @@ -2,64 +2,58 @@ title: CSSStyleDeclaration.getPropertyCSSValue() slug: Web/API/CSSStyleDeclaration/getPropertyCSSValue tags: - - API - - CSSOM - - Method - - Obsolete - - Reference +- API +- CSSOM +- Method +- Deprecated +- Reference +browser-compat: api.CSSStyleDeclaration.getPropertyCSSValue translation_of: Web/API/CSSStyleDeclaration/getPropertyCSSValue --- -

{{ APIRef("CSSOM") }} {{Obsolete_header}}

+

{{ APIRef("CSSOM") }} {{deprecated_header}}

-

CSSStyleDeclaration.getPropertyCSSValue() メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。 プロパティ名が省略プロパティの場合は null を返すことに注意して下さい。

+

CSSStyleDeclaration.getPropertyCSSValue() メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。プロパティ名が一括指定プロパティの場合は null を返すことに注意して下さい。

-

代わりに {{domxref("CSSStyleDeclaration.getPropertyValue()")}} を使用する必要があります。

+
+

注: このインターフェースは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。

+

この目的を達成するには、以下のものを使用することができます。

+ +
-

構文

+

構文

-
var value = style.getPropertyCSSValue(property);
+
var value = style.getPropertyCSSValue(property);
-

パラメータ

+

引数

-

返り値

+

返値

-

例

+

例

-

次の JavaScript コードは、 color CSS プロパティの計算された RGB 値を含むオブジェクトを取得します:

+

次の JavaScript コードは、 CSS の color プロパティの計算済みの RGB 値を含むオブジェクトを取得します。

-
var style = window.getComputedStyle(elem, null);
+
var style = window.getComputedStyle(elem, null);
 var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
 

 
-
仕様

+
仕様書

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様ステータス備考
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}{{Spec2('DOM2 Style')}}2003年7月に廃止と宣言

+
この機能はもともと、 DOM Style Level 2 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。

 
-
ブラウザー実装状況

+
この機能は、最新の、しかし互換性のない、 CSS Typed Object Model API に取って代わられ、現在は標準化されています。

 
+
ブラウザーの互換性

 
-
-
{{Compat("api.CSSStyleDeclaration.getPropertyCSSValue")}}

+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html
new file mode 100644
index 0000000000..36a6406cf0
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html
@@ -0,0 +1,47 @@
+---
+title: CSSStyleDeclaration.getPropertyPriority()
+slug: Web/API/CSSStyleDeclaration/getPropertyPriority
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.getPropertyPriority
+translation_of: Web/API/CSSStyleDeclaration/getPropertyPriority
+---
+
{{ APIRef("CSSOM") }}

+
+
CSSStyleDeclaration.getPropertyPriority() メソッドインターフェイスは、 {{domxref('DOMString')}} でその CSS プロパティに明示的に設定されたすべての優先度を返します。

+
+
構文

+
+
var priority = style.getPropertyPriority(property);

+
+
引数

+
+
+
+
返値

+
+
+
+
例

+
+
以下の JavaScript コードは、 margin が CSS セレクターの規則で important と記されているかどうかをチェックします。

+
+
var declaration = document.styleSheets[0].cssRules[0].style;
+var isImportant = declaration.getPropertyPriority('margin') === 'important';
+

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
index feb4705491..6b403a875b 100644
--- a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
+++ b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
@@ -2,66 +2,46 @@
 title: CSSStyleDeclaration.getPropertyValue()
 slug: Web/API/CSSStyleDeclaration/getPropertyValue
 tags:
-  - API
-  - CSSOM
-  - Method
-  - Reference
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.getPropertyValue
 translation_of: Web/API/CSSStyleDeclaration/getPropertyValue
 ---
 
{{ APIRef("CSSOM") }}

 
 
CSSStyleDeclaration.getPropertyValue() メソッドインターフェイスは、指定された CSS プロパティの値を含む {{domxref('DOMString')}} を返します。

 
-
構文

+
構文

 
-
var value = style.getPropertyValue(property);

+
var value = style.getPropertyValue(property);

 
-
パラメータ

+
引数

 
 
 
-
返り値

+
返値

 
 
 
-
例

+
例

 
-
次の JavaScript コードは CSS セレクタールールの margin プロパティの値をクエリします:

+
次の JavaScript コードは、 CSS セレクター規則の margin プロパティの値を問い合わせます。

 
-
var declaration = document.styleSheets[0].cssRules[0].style;
+
var declaration = document.styleSheets[0].cssRules[0].style;
 var value = declaration.getPropertyValue('margin'); // "1px 2px"
 

 
-
仕様

+
Specifications

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様ステータス備考
{{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertyvalue', 'CSSStyleDeclaration.getPropertyValue()')}}{{Spec2('CSSOM')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}{{Spec2('DOM2 Style')}}

+{{Specifications}}
 
-
ブラウザー実装状況

+
ブラウザーの互換性

 
-
-
-
{{Compat("api.CSSStyleDeclaration.getPropertyValue")}}

+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/index.html b/files/ja/web/api/cssstyledeclaration/index.html
index 7055ef0943..43e40972cb 100644
--- a/files/ja/web/api/cssstyledeclaration/index.html
+++ b/files/ja/web/api/cssstyledeclaration/index.html
@@ -1,66 +1,68 @@
 ---
 title: CSSStyleDeclaration
 slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - CSSRule
+  - Interface
+  - Reference
+browser-compat: api.CSSStyleDeclaration
 translation_of: Web/API/CSSStyleDeclaration
 ---
 
{{APIRef("CSSOM")}}

 
-
CSSStyleDeclarationインターフェースはCSS宣言ブロックオブジェクトを表し、スタイル情報やスタイル関連のメソッド、プロパティを提供します。

+
CSSStyleDeclaration インターフェースは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。

 
-
CSSStyleDeclaration オブジェクトは下記の３つのAPIによって使用されます。

+
CSSStyleDeclaration オブジェクトは、下記の 3 つの API によって使用されます。

 
 
    
- 
  • {{DOMxRef("HTMLElement.style")}}。
    
-  DOM要素をインラインスタイルで扱う際。(例, <div style="...">).
    • 
- 
  • {{DOMxRef("CSSStyleSheet")}} API。
    
-  例えばdocument.styleSheets[0].cssRules[0].style は、CSSStyleDeclaration を返します。
    • 
- 
  • {{DOMxRef("Window.getComputedStyle()")}}。
    
-  これは読み取り専用インターフェースとして、CSSStyleDeclaration オブジェクトを返します。
    • 
+ 
  • 単一の要素のインラインスタイルを扱う {{DOMxRef("HTMLElement.style")}} から (例: <div style="...">)。
    • 
+ 
  • {{DOMxRef("CSSStyleSheet")}} API から。例えば document.styleSheets[0].cssRules[0].style は、その文書の最初のスタイルシートの最初の CSS 規則を CSSStyleDeclaration を返します。
    • 
+ 
  • {{DOMxRef("Window.getComputedStyle()")}} で、 CSSStyleDeclaration オブジェクトを読み取り専用インターフェイスとして返します。
    • 
 

 
 
属性

 
 

  
{{DOMxRef("CSSStyleDeclaration.cssText")}}

- 
Textual representation of the declaration block. Setting this attribute changes the style.

- CSSブロック宣言をテキスト表示する。この属性を与えることでスタイルを変化させることが可能。

+ 
宣言ブロックのテキスト表現です。この属性を設定すると、スタイルが変化します。

  
{{DOMxRef("CSSStyleDeclaration.length")}}{{ReadOnlyInline}}

- 
プロパティの数を表す。後述の{{DOMxRef("CSSStyleDeclaration.item()", 'item()')}}メソッドを参照のこと。

-  

+ 
プロパティの数を表します。後述の {{DOMxRef("CSSStyleDeclaration.item()", 'item()')}} メソッドを参照のこと。

  
{{DOMxRef("CSSStyleDeclaration.parentRule")}}{{ReadOnlyInline}}

- 
{{DOMxRef("CSSRule")}}を含むコンテナを表す。

+ 
所属する {{DOMxRef("CSSRule")}} を表します。

 

 
-
CSS プロパティ

+
CSS プロパティ

 
 

- 
{{DOMxRef("CSSStyleDeclaration.named_properties", "CSSStyleDeclaration.cssFloat")}}

- 
{{CSSxRef("float")}} CSSプロパティのエイリアス。

- 
{{DOMxRef("CSSStyleDeclaration.named_properties", 'CSSStyleDeclaration named properties', "", 1)}}

- 
全てのCSSプロパティに対して、その値を取得する。

+ 
{{DOMxRef("CSSStyleDeclaration.cssFloat", "CSSStyleDeclaration.cssFloat")}}

+ 
CSS の {{CSSxRef("float")}} プロパティのエイリアスです。

+ 
{{DOMxRef("CSSStyleDeclaration.named_properties", 'CSSStyleDeclaration の名前付きプロパティ', "", 1)}}

+ 
対応するすべての CSS プロパティを、ダッシュおよびキャメルケースにした属性です。

 

 
-
メソッド

+
メソッド

 
 

  
{{DOMxRef("CSSStyleDeclaration.getPropertyPriority()")}}

- 
Returns the optional priority, "important".

+ 
オプションの優先度、 "important" を返します。

  
{{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}}

- 
Returns the property value given a property name.

+ 
指定されたプロパティ名のプロパティ値を返します。

  
{{DOMxRef("CSSStyleDeclaration.item()")}}

- 
Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.

- 
An alternative to accessing nodeList[i] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.

+ 
位置から CSS プロパティ名を返します。位置が範囲を超えていた場合は空文字列を返します。

+ 
代替方法は nodeList[i] にアクセスすることです (これは i が範囲外であった場合は undefined を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。

  
{{DOMxRef("CSSStyleDeclaration.removeProperty()")}}

- 
Removes a property from the CSS declaration block.

+ 
CSS 宣言ブロックからプロパティを削除します。

  
{{DOMxRef("CSSStyleDeclaration.setProperty()")}}

- 
Modifies an existing CSS property or creates a new CSS property in the declaration block.

- 
{{DOMxRef("CSSStyleDeclaration.getPropertyCSSValue()")}} {{Obsolete_Inline}}

- 
Only supported via getComputedStyle in Firefox. Returns the property value as a {{DOMxRef("CSSPrimitiveValue")}} or null for shorthand properties.

+ 
宣言ブロック内の既存の CSS プロパティを変更するか、新しい CSS プロパティを生成するかします。

+ 
{{DOMxRef("CSSStyleDeclaration.getPropertyCSSValue()")}} {{deprecated_inline}}

+ 
Firefox の getComputedStyle のみ対応 プロパティの値を {{DOMxRef("CSSPrimitiveValue")}} として、または一括指定プロパティでは null を返します。

 

 
-
例

+
例

 
-
var styleObj = document.styleSheets[0].cssRules[0].style;
+
var styleObj = document.styleSheets[0].cssRules[0].style;
 console.log(styleObj.cssText);
 
 for (var i = styleObj.length; i--;) {
@@ -70,52 +72,16 @@ for (var i = styleObj.length; i--;) {
 
 console.log(styleObj.cssText);

 
-
仕様

+
仕様書

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様ステータスコメント
{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}{{Spec2('CSSOM')}}Merged the DOM Level 2 Style CSS2Properties interface into CSSStyleDeclaration.
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}{{Spec2('DOM2 Style')}}Initial definition

+{{Specifications}}
 
-
ブラウザー実装状況

+
ブラウザーの互換性

 
+
{{Compat}}

 
-
-
{{Compat("api.CSSStyleDeclaration")}}

-
-
関連情報

+
関連情報

 
 
-
-

-

-

-

-
-

-
-

-

-
-

-

-

diff --git a/files/ja/web/api/cssstyledeclaration/item/index.html b/files/ja/web/api/cssstyledeclaration/item/index.html
new file mode 100644
index 0000000000..0ee3b526f3
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/item/index.html
@@ -0,0 +1,50 @@
+---
+title: CSSStyleDeclaration.item()
+slug: Web/API/CSSStyleDeclaration/item
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.item
+translation_of: Web/API/CSSStyleDeclaration/item
+---
+
{{ APIRef("CSSOM") }}

+
+
CSSStyleDeclaration.item() メソッドインターフェイスは、位置を指定して {{domxref('CSSStyleDeclaration')}} の CSS プロパティ名を返します。このメソッドは与えた値による例外が発生しません。位置が範囲外だった場合は空文字列が返され、引数が与えられなかった場合は TypeError が発生します。

+
+
構文

+
+
var propertyName = style.item(index);
+

+
+
引数

+
+
    
+  
  • index は読み取るノードの位置です。位置は 0 から始まります。
    • 
+

+
+
返値

+
+
    
+  
  • propertyName は {{domxref('DOMString')}} で、指定された位置にある CSS プロパティの名前を返します。
    • 
+

+
+
JavaScript には、 NodeList から位置を指定して項目を取得するための簡単な特別な構文があります。
+

+
+
var propertyName = style[index];
+

+
+
例

+
+
var style = document.getElementById('div1').style;
+var propertyName = style.item(1); // または style[1] - リスト中の 2 番目のスタイルを返します

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/length/index.html b/files/ja/web/api/cssstyledeclaration/length/index.html
new file mode 100644
index 0000000000..8da1caf745
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/length/index.html
@@ -0,0 +1,43 @@
+---
+title: CSSStyleDeclaration.length
+slug: Web/API/CSSStyleDeclaration/length
+tags:
+- API
+- CSSOM
+- Property
+- Reference
+browser-compat: api.CSSStyleDeclaration.length
+translation_of: Web/API/CSSStyleDeclaration/length
+---
+
{{ APIRef("CSSOM") }}

+
+
読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。

+
+
構文

+
+
var num = styles.length;

+
+
値

+
+
このインスタンスの親に明示的に設定されているスタイルの数を示す整数です。

+
+
例

+
+
次の例は、以下の HTML 要素に明示的に設定されたスタイルの数を取得します。
+

+
+
<div id="div1" style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>

+
+
JavaScript コード:

+
+
var myDiv = document.getElementById('div1'); var divStyle = myDiv.style; var len = divStyle.length; // 6

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/parentrule/index.html b/files/ja/web/api/cssstyledeclaration/parentrule/index.html
new file mode 100644
index 0000000000..d8def05ea5
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/parentrule/index.html
@@ -0,0 +1,38 @@
+---
+title: CSSStyleDeclaration.parentRule
+slug: Web/API/CSSStyleDeclaration/parentRule
+tags:
+- API
+- CSSOM
+- Property
+- Reference
+browser-compat: api.CSSStyleDeclaration.parentRule
+translation_of: Web/API/CSSStyleDeclaration/parentRule
+---
+
{{ APIRef("CSSOM") }}

+
+
CSSStyleDeclaration.parentRule は読み取り専用のプロパティで、このスタイルブロックの親である {{domxref('CSSRule')}} を返します。例えば、 CSS セレクターのスタイルを表す {{domxref('CSSStyleRule')}} です。

+
+
構文

+
+
var rule = styles.parentRule;

+
+
値

+
+
この宣言ブロックを含む CSS 規則、またはこの {{domxref('CSSStyleDeclaration')}} が {{domxref('CSSRule')}} に割り当てられていない場合は null を返します。

+
+
例

+
+
次の JavaScript コードは、 {{domxref('CSSStyleDeclaration')}} から親の CSS スタイル規則を取得します。

+
+
var declaration = document.styleSheets[0].rules[0].style;
+var rule = declaration.parentRule;
+

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

diff --git a/files/ja/web/api/cssstyledeclaration/removeproperty/index.html b/files/ja/web/api/cssstyledeclaration/removeproperty/index.html
new file mode 100644
index 0000000000..a1a2600d10
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/removeproperty/index.html
@@ -0,0 +1,53 @@
+---
+title: CSSStyleDeclaration.removeProperty()
+slug: Web/API/CSSStyleDeclaration/removeProperty
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.removeProperty
+translation_of: Web/API/CSSStyleDeclaration/removeProperty
+---
+
{{ APIRef("CSSOM") }}

+
+
CSSStyleDeclaration.removeProperty() メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。

+
+
構文

+
+
var oldValue = style.removeProperty(property);

+
+
引数

+
+
    
+  
  • property は {{domxref('DOMString')}} で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。
    • 
+

+
+
返値

+
+
    
+  
  • oldValue は {{domxref('DOMString')}} で、削除される前の CSS プロパティの値と等しいものです。
    • 
+

+
+
例外

+
+
    
+  
  • {{domxref('DOMException')}} NO_MODIFICATION_ALLOWED_ERR: プロパティまたは宣言ブロックが読取専用の場合。
    • 
+

+
+
例

+
+
次の JavaScript コードは、 CSS の background-color プロパティをセレクター規則から削除します。

+
+
var declaration = document.styleSheets[0].rules[0].style;
+var oldValue = declaration.removeProperty('background-color');
+

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

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

+
+
引数

+
+
    
+  
  • propertyName は {{domxref('DOMString')}} で、変更する CSS プロパティ名 (ハイフン区切り) です。
    • 
+  
  • value {{optional_inline}} は
+    {{domxref('DOMString')}} で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。
+    
      
+      
    • 注: value は "!important" を含んではいけません。 --
+        これは priority 引数を使用して設定してください。
      • 
+    
    
+  
    • 
+  
  • priority {{optional_inline}} は
+    {{domxref('DOMString')}} で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。
+    
      
+      
    • 文字列値 "important"
      • 
+      
    • キーワード undefined
      • 
+      
    • 空文字列値 ""
      • 
+    
    
+  
    • 
+

+
+
返値

+
+
    
+  
  • {{jsxref('undefined')}}
    • 
+

+
+
例外

+
+
    
+  
  • {{domxref('DOMException')}} (NoModificationAllowedError): このプロパティまたは宣言ブロックが読み取り専用であった場合。
    • 
+

+
+
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