From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/cssstylesheet/deleterule/index.html | 124 +++++++++++++ files/ja/web/api/cssstylesheet/index.html | 136 ++++++++++++++ .../ja/web/api/cssstylesheet/insertrule/index.html | 197 +++++++++++++++++++++ 3 files changed, 457 insertions(+) create mode 100644 files/ja/web/api/cssstylesheet/deleterule/index.html create mode 100644 files/ja/web/api/cssstylesheet/index.html create mode 100644 files/ja/web/api/cssstylesheet/insertrule/index.html (limited to 'files/ja/web/api/cssstylesheet') diff --git a/files/ja/web/api/cssstylesheet/deleterule/index.html b/files/ja/web/api/cssstylesheet/deleterule/index.html new file mode 100644 index 0000000000..9754516cf3 --- /dev/null +++ b/files/ja/web/api/cssstylesheet/deleterule/index.html @@ -0,0 +1,124 @@ +--- +title: CSSStyleSheet.deleteRule() +slug: Web/API/CSSStyleSheet/deleteRule +tags: + - API + - CSSOM + - CSSStyleSheet + - Method + - Reference +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +

{{APIRef("CSSOM")}}

+ +

CSSStyleSheet.deleteRule() メソッドは、スタイル規則を現在のスタイルシートオブジェクトから削除します。

+ +

構文

+ +
stylesheet.deleteRule(index)
+
+ +

引数

+ + + +

戻り値

+ +

無効。

+ +

例

+ +
 myStyles.deleteRule(0);
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("CSSOM", "#dom-cssstylesheet-deleterule", 'CSSStyleSheet.deleteRule()')}}{{Spec2("CSSOM")}} 
{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet-deleteRule", "CSSStyleSheet.deleteRule()")}}{{Spec2("DOM2 Style")}}初期定義
+ +

ブラウザーの実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

従来のブラウザーのサポート

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/cssstylesheet/index.html b/files/ja/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..d34d904d14 --- /dev/null +++ b/files/ja/web/api/cssstylesheet/index.html @@ -0,0 +1,136 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +tags: + - API + - CSSOM + - Reference +translation_of: Web/API/CSSStyleSheet +--- +
{{APIRef("CSSOM")}}
+ +

CSSStyleSheet インターフェイスは、1 枚の CSS スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。

+ +

スタイルシートは、{{domxref("CSSStyleRule", "スタイル規則", "", 1)}} ("h1,h2 { font-size: 16pt }")、様々な @-規則 (@import, @media, ...) 等の {{domxref("CSSRule", "規則", "", 1)}} から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。

+ +

CSSStyleSheet オブジェクトを取得できる様々な方法は、{{anch("Notes", "補記")}} セクションを参照してください。

+ +

プロパティ

+ +

親である {{domxref("Stylesheet")}} からプロパティを継承します。

+ +
+
{{domxref("CSSStyleSheet.cssRules")}}
+
現在の {{domxref("CSSRuleList")}} を返す。これは、スタイルシート内の {{domxref("CSSRule")}} オブジェクトのリストです。
+ これは通常、次のように個々の規則へアクセスするために使用されます: + 
   styleSheet.cssRules[i] // where i = 0..cssRules.length
+ cssRules 内のアイテムを追加または削除するには、下記のように、CSSStyleSheet の deleteRule() メソッドと insertRule() メソッドを使用します。
+
{{domxref("CSSStyleSheet.ownerRule")}}
+
これが {{cssxref("@import")}} 規則を使用して document にインポートされたスタイルシートである場合、ownerRule は、その {{domxref("CSSImportRule")}} を返す。そうでない場合、null を返す。
+
+ +

メソッド

+ +

親である {{domxref("Stylesheet")}} からメソッドを継承します。

+ +
+
{{domxref("CSSStyleSheet.deleteRule")}}
+
スタイルシートから、指定した位置の規則を削除する。
+
{{domxref("CSSStyleSheet.insertRule")}}
+
スタイルシート内の指定した位置に新しい規則を挿入する。規則のテキスト表現が与えられます。
+
+ +

補記

+ +

一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれている場合、cssRules の呼び出しで SecurityError が発生します。

+ +

スタイルシートは、多くても 1 個の {{domxref("Document")}} と関連付けられ、これに適用されます ({{domxref("StyleSheet.disabled", "disabled", "", 1)}} でない限り)。与えられた document の CSSStyleSheet オブジェクトのリストは、{{domxref("document.styleSheets")}} プロパティを使用して取得できます。特定のスタイルシートは、もしあれば、その owner オブジェクト (Node または CSSImportRule) からもアクセスできます。

+ +

CSSStyleSheet オブジェクトは、document のスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その document の styleSheets リストに挿入されます。{{domxref("document.styleSheets")}} リストは直接変更できないため、新しい CSSStyleSheet オブジェクトを手動で作成する手ごろな方法はありません (とはいえ、Constructable Stylesheet Objects が Web API のどこかに追加される可能性があります)。新しいスタイルシートを作成するには、{{HTMLElement("style")}} 要素か {{HTMLElement("link")}} 要素を document に挿入してください。

+ +

スタイルシートを document と関連付ける方法のリスト (おそらく未完成) は次のとおり:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
スタイルシートが document と関連付けられる理由document
+ .styleSheets リストに現れる		スタイルシートオブジェクトを与える owner 要素または規則の取得owner オブジェクトのインターフェイスCSSStyleSheet オブジェクトを owner から取得
document 内の {{HTMLElement("style")}} 要素と {{HTMLElement("link")}} 要素はい{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("HTMLLinkElement")}} または
+ {{domxref("HTMLStyleElement")}}、
+ {{domxref("SVGStyleElement")}}		{{domxref("LinkStyle.sheet", ".sheet")}}
document に適用される他のスタイルシート内の CSS {{cssxref("@import")}} 規則はい{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}{{domxref("CSSImportRule")}}{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}
(HTML でない) document 内の <?xml-stylesheet ?> 処理命令はい{{domxref("StyleSheet.ownerNode", ".ownerNode")}}{{domxref("ProcessingInstruction")}}{{domxref("LinkStyle.sheet", ".sheet")}}
HTTP Link HeaderはいN/AN/AN/A
ユーザーエージェントの (既定の) スタイルシートいいえN/AN/AN/A
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}{{Spec2("CSSOM")}} 
{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}{{Spec2("DOM2 Style")}}初期定義
+ +

ブラウザーの実装状況

+ +

{{Compat("api.CSSStyleSheet")}}

+ + +

関連情報

+ + diff --git a/files/ja/web/api/cssstylesheet/insertrule/index.html b/files/ja/web/api/cssstylesheet/insertrule/index.html new file mode 100644 index 0000000000..c4e33cac04 --- /dev/null +++ b/files/ja/web/api/cssstylesheet/insertrule/index.html @@ -0,0 +1,197 @@ +--- +title: CSSStyleSheet.insertRule() +slug: Web/API/CSSStyleSheet/insertRule +tags: + - API + - CSSOM + - CSSStyleSheet + - Method + - Reference +translation_of: Web/API/CSSStyleSheet/insertRule +--- +

CSSStyleSheet.insertRule() メソッドは、新しい CSS 規則を現在のスタイルシートに挿入しますが、いくつかの制限があります。

+ +
+

メモ: insertRule() は {{domxref("CSSStyleSheet")}} の排他的なメソッドですが、実際には規則を {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules、内部的には {{domxref("CSSRuleList")}} に挿入します。

+
+ +

構文

+ +
stylesheet.insertRule(rule[, index])
+ +

引数

+ +
+
rule
+
+

挿入される規則が入った {{domxref("DOMString")}} です。どのような規則を挿入するかは、種類に依存します。

+ + +
+
index {{optional_inline}}
+
stylesheet.cssRules.length 以下の正の数で、 {{domxref("CSSStyleSheet", "", "", "1")}}.cssRules の中で新しく挿入される規則の位置を示します。既定値は 0 です。 (古い実装では、これは必須でした。詳しくはブラウザーの対応を参照してください。)
+
+ +

返値

+ +

スタイルシートの規則リスト内の、新たに挿入された規則のインデックスです。

+ +

制限事項

+ +

CSS スタイルシート規則のリストには、規則がどのようにどこへ挿入されるかに影響する、いくつかの直感的な、またはそれほど直感的でない 制限 があります。これらに違反すると、 {{domxref("DOMException")}} のようなエラーを引き起こす原因になるでしょう。

+ + + +

例

+ +

例1

+ +
// myStyle の先頭に新しい規則を挿入
+myStyle.insertRule("#blanc { color: white }", 0);
+
+ +

例2

+ +
/**
+ * Add a stylesheet rule to the document (it may be better practice
+ * to dynamically change classes, so style information can be kept in
+ * genuine stylesheets and avoid adding extra elements to the DOM).
+ * Note that an array is needed for declarations and rules since ECMAScript does
+ * not guarantee a predictable object iteration order, and since CSS is
+ * order-dependent.
+ * @param {Array} rules Accepts an array of JSON-encoded declarations
+ * @example
+addStylesheetRules([
+  ['h2', // Also accepts a second argument as an array of arrays instead
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' for !important rules
+  ],
+  ['.myClass',
+    ['background-color', 'yellow']
+  ]
+]);
+*/
+function addStylesheetRules (rules) {
+  var styleEl = document.createElement('style');
+
+  // Append <style> element to <head>
+  document.head.appendChild(styleEl);
+
+  // Grab style element's sheet
+  var styleSheet = styleEl.sheet;
+
+  for (var i = 0; i < rules.length; i++) {
+    var j = 1,
+        rule = rules[i],
+        selector = rule[0],
+        propStr = '';
+    // If the second argument of a rule is an array of arrays, correct our variables.
+    if (Array.isArray(rule[1][0])) {
+      rule = rule[1];
+      j = 0;
+    }
+
+    for (var pl = rule.length; j < pl; j++) {
+      var prop = rule[j];
+      propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
+    }
+
+    // Insert CSS Rule
+    styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}}{{Spec2('CSSOM')}}{{SpecName('DOM2 Style')}} からの変更なし。
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}}{{Spec2('DOM2 Style')}}初回定義
+ +

ポリフィル

+ +

以下のポリフィルは、 Internet Explorer 5–8 において、 insertRule の引数の入力を標準に準拠させるものです。 insertRule を関数で補完し、引数を既定のネイティブの insertRule に送る前に、セレクターを規則から分離します。

+ +
(function(Sheet_proto){
+    var originalInsertRule = Sheet_proto.insertRule;
+    if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules)
+        Sheet_proto.insertRule = function(selectorAndRule){
+            // First, separate the selector from the rule
+            a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) {
+                newCharCode = selectorAndRule.charCodeAt(i);
+                if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0)
+                    // Secondly, find the last closing bracket
+                    var openBracketPos = i, closeBracketPos = -1;
+                    for (; i !== Len; ++i) {
+                        newCharCode = selectorAndRule.charCodeAt(i);
+                        if (!isEscaped && (newCharCode === 125)) { // 125 = "}".charCodeAt(0)
+                            closeBracketPos = i;
+                        }
+                        isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
+                    }
+                    if (closeBracketPos === -1) break a; // no closing bracket was found!
+                    /*else*/ return originalInsertRule.call(
+                        this, // the sheet to be changed
+                        selectorAndRule.substring(0, openBracketPos), // the selector
+                        selectorAndRule.substring(closeBracketPos), // the rule
+                        arguments[3] // the insert index
+                    );
+                }
+                // works by if the char code is a backslash, then isEscaped gets flipped (XOR-ed by
+                // 1), and if it is not a backslash then isEscaped gets XORed by itself, zeroing it
+                isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
+            }
+            // Else, there is no unescaped bracket
+            return originalInsertRule.call(this, selectorAndRule, "", arguments[2]);
+        };
+    }
+})(CSSStyleSheet.prototype);
+
+ +

ブラウザーの対応

+ + + +

{{Compat("api.CSSStyleSheet.insertRule")}}

+ +

古いブラウザーの対応

+ +

Internet Explorer 8 以前

+ +

addRule(selector, rule [, index]); — 例: addRule('pre', 'font: 14px verdana'); // 規則を末尾に追加

+ +

また、標準外の removeRule() および .rules が、それぞれ {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} および {{domxref("CSSStyleSheet",".cssRules")}} の代わりに使用されていることにも注意してください。

+ +

関連情報

+ + + +
{{APIRef("CSSOM")}}
-- cgit v1.2.3-54-g00ecf