From bbed12e574958e07af25518c7e66bd5ee2fb2d2c Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 9 Jun 2021 00:40:02 +0000 Subject: [CRON] sync translated content --- .../web/api/elementcssinlinestyle/index.html | 57 ++++++++++++ .../web/api/elementcssinlinestyle/style/index.html | 103 +++++++++++++++++++++ 2 files changed, 160 insertions(+) create mode 100644 files/ja/orphaned/web/api/elementcssinlinestyle/index.html create mode 100644 files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html (limited to 'files/ja/orphaned') diff --git a/files/ja/orphaned/web/api/elementcssinlinestyle/index.html b/files/ja/orphaned/web/api/elementcssinlinestyle/index.html new file mode 100644 index 0000000000..c654081ebb --- /dev/null +++ b/files/ja/orphaned/web/api/elementcssinlinestyle/index.html @@ -0,0 +1,57 @@ +--- +title: ElementCSSInlineStyle +slug: orphaned/Web/API/ElementCSSInlineStyle +tags: + - API + - CSS + - ElementCSSInlineStyle + - Interface + - Mixin + - Reference + - ミックスイン +translation_of: Web/API/ElementCSSInlineStyle +original_slug: Web/API/ElementCSSInlineStyle +--- +

{{APIRef("CSSOM")}}{{Draft}}

+ +

ElementCSSInlineStyle ミックスインは、 {{DOMxRef("HTMLElement")}}, {{DOMxRef("SVGElement")}}, {{DOMxRef("MathMLElement")}} インターフェイスで共通の CSSOM に特化した機能を記述します。これらのインターフェイスは、もちろん、以下に上げたものに加えて機能を追加することができます。

+ +
+

注: ElementCSSInlineStyle はミックスインであり、インターフェイスではありません。実際に ElementCSSInlineStyle 型のオブジェクトを生成することはできません。

+
+ +
{{InterfaceOverview("CSSOM")}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM", "#the-elementcssinlinestyle-mixin", 'HTMLOrForeignElement')}}{{Spec2("CSSOM")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..75984c4084 --- /dev/null +++ b/files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,103 @@ +--- +title: ElementCSSInlineStyle.style +slug: orphaned/Web/API/ElementCSSInlineStyle/style +tags: + - API + - CSSOM + - HTMLElement + - Property + - Reference + - SVGElement + - Style +translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/ElementCSSInlineStyle/style +--- +
{{APIRef("CSSOM")}}
+ +

styleプロパティは、要素のインラインスタイルと同様に設定したり取得したりするために使用します。取得時は {{domxref("CSSStyleDeclaration")}} オブジェクトで、その要素のインラインの style 属性で定義された属性に割り当てられた値を持つ、その要素のすべてのスタイルプロパティのリストを返します。

+ +

style 経由でアクセス可能な CSS プロパティのリストについては、CSS プロパティリファレンスを参照してください。style プロパティは CSS カスケードで style 属性によるインラインスタイル宣言と同じ (かつ最高の) 優先順位を持ちます。

+ +

スタイルの設定

+ +

スタイルは style プロパティに (elt.style = "color: blue;" のように) 文字列で直接代入して設定しないでください。これは style 属性が読み取り専用であり、また CSSStyleDeclaration オブジェクトも読み取り専用だからです。代わりに、 style. のプロパティに値を代入してスタイルを設定できます。要素に対して特定のスタイルを他のスタイル値を変えずに追加するため、 style の個々のプロパティを (elt.style.color = '...'のように) 使うことをお勧めします。 elt.style.cssText = '...' や elt.setAttribute('style', '...') では要素のインラインスタイルを、既存のインラインスタイルを上書きすることで設定するからです。なお、 elt.style.<プロパティ> を使ってスタイルを設定する時、プロパティ名はキャメルケースであって、ケバブケースでないので注意してください (つまり elt.style.fontSizeとなり、 elt.style.font-sizeではありません)。

+ +

スタイル宣言は null または空文字を設定することでリセットします。例えば elt.style.color = null のようにします。 Internet Explorer は空文字列を設定する必要があり、 null に設定しても何も起こりません。

+ +

例

+ +
// Set multiple styles in a single statement
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Or
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Set specific style while leaving other inline style values untouched
+elt.style.color = "blue";
+
+ +

スタイル情報の取得

+ +

style プロパティは、要素に適用されているスタイルを完全に知るためには有用ではありません。これは、要素のインラインの style 属性に設定されている CSS 宣言のみを表し、 {{HTMLElement("head")}} セクションのスタイル規則や外部のスタイルシートなど、他の場所のスタイル規則に由来するものを表してはいないからです。要素のすべての CSS プロパティの値を取得するには、代わりに {{domxref("Window.getComputedStyle()")}} を使用する必要があります。

+ +

次のコードスニペットは、要素の style プロパティで取得する値と、getComputedStyle() で取得するものの違いを実演します。

+ +
<!DOCTYPE HTML>
+<html>
+  <body style="font-weight:bold;">
+    <div style="color:red" id="myElement">..</div>
+  </body>
+</html>
+
+ +
var element = document.getElementById("myElement");
+var out = "";
+var elementStyle = element.style;
+var computedStyle = window.getComputedStyle(element, null);
+
+for (prop in elementStyle) {
+  if (elementStyle.hasOwnProperty(prop)) {
+    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
+  }
+}
+console.log(out)
+
+ +

出力されるコードは次のようなものです。

+ +
...
+fontWeight = '' > 'bold'
+color = 'red' > 'rgb(255, 0, 0)'
+...
+ +

font-weight のスタイルの計算値に bold の値がありますが、要素の style プロパティにはないことに注意してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM', '#dom-elementcssinlinestyle-style', 'the ElementCSSInlineStyle.style property')}}{{Spec2('CSSOM')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLElement.style")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf