From 093cf8ad24d87bdf2812916a745399863dfac50c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 13:00:02 +0900 Subject: ElementCSSInlineStyle を削除 (#1593) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ElementCSSInlineStyle を削除して、その style プロパティを HTMLElement に移管。 --- files/ja/_redirects.txt | 7 +- files/ja/_wikihistory.json | 34 +++---- .../web/api/elementcssinlinestyle/index.html | 55 ----------- .../web/api/elementcssinlinestyle/style/index.html | 101 --------------------- files/ja/web/api/htmlelement/index.html | 88 +++++------------- files/ja/web/api/htmlelement/style/index.html | 95 +++++++++++++++++++ 6 files changed, 136 insertions(+), 244 deletions(-) delete mode 100644 files/ja/orphaned/web/api/elementcssinlinestyle/index.html delete mode 100644 files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html create mode 100644 files/ja/web/api/htmlelement/style/index.html (limited to 'files/ja') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 93b6623fbc..3ba3652521 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1466,7 +1466,7 @@ /ja/docs/DOM/element.setAttributeNS /ja/docs/Web/API/Element/setAttributeNS /ja/docs/DOM/element.setAttributeNode /ja/docs/Web/API/Element/setAttributeNode /ja/docs/DOM/element.setAttributeNodeNS /ja/docs/Web/API/Element/setAttributeNodeNS -/ja/docs/DOM/element.style /ja/docs/orphaned/Web/API/ElementCSSInlineStyle/style +/ja/docs/DOM/element.style /ja/docs/Web/API/HTMLElement/style /ja/docs/DOM/element.tabIndex /ja/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /ja/docs/DOM/element.tagName /ja/docs/Web/API/Element/tagName /ja/docs/DOM/element.title /ja/docs/Web/API/HTMLElement/title @@ -1748,7 +1748,7 @@ /ja/docs/DOM:element.setAttributeNS /ja/docs/Web/API/Element/setAttributeNS /ja/docs/DOM:element.setAttributeNode /ja/docs/Web/API/Element/setAttributeNode /ja/docs/DOM:element.setAttributeNodeNS /ja/docs/Web/API/Element/setAttributeNodeNS -/ja/docs/DOM:element.style /ja/docs/orphaned/Web/API/ElementCSSInlineStyle/style +/ja/docs/DOM:element.style /ja/docs/Web/API/HTMLElement/style /ja/docs/DOM:element.tagName /ja/docs/Web/API/Element/tagName /ja/docs/DOM:event /ja/docs/Web/API/Event /ja/docs/DOM:event.altKey /ja/docs/Web/API/MouseEvent/altKey @@ -3548,8 +3548,6 @@ /ja/docs/Web/API/Element/accessKey /ja/docs/Web/API/HTMLElement/accessKey /ja/docs/Web/API/Element/currentStyle /ja/docs/orphaned/Web/API/Element/currentStyle /ja/docs/Web/API/Element/name /ja/docs/conflicting/Web/API -/ja/docs/Web/API/ElementCSSInlineStyle /ja/docs/orphaned/Web/API/ElementCSSInlineStyle -/ja/docs/Web/API/ElementCSSInlineStyle/style /ja/docs/orphaned/Web/API/ElementCSSInlineStyle/style /ja/docs/Web/API/Event/button /ja/docs/conflicting/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/Web/API/EventHandler /ja/docs/orphaned/Web/Guide/Events/Event_handlers @@ -3577,7 +3575,6 @@ /ja/docs/Web/API/HTMLElement/focus /ja/docs/orphaned/Web/API/HTMLOrForeignElement/focus /ja/docs/Web/API/HTMLElement/forceSpellCheck /ja/docs/orphaned/Web/API/HTMLElement/forceSpellCheck /ja/docs/Web/API/HTMLElement/nonce /ja/docs/orphaned/Web/API/HTMLOrForeignElement/nonce -/ja/docs/Web/API/HTMLElement/style /ja/docs/orphaned/Web/API/ElementCSSInlineStyle/style /ja/docs/Web/API/HTMLElement/tabIndex /ja/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex /ja/docs/Web/API/HTMLFormElement.acceptCharset /ja/docs/Web/API/HTMLFormElement/acceptCharset /ja/docs/Web/API/HTMLFormElement.action /ja/docs/Web/API/HTMLFormElement/action diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index cfc4ff29b8..3505410f53 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -16319,6 +16319,20 @@ "Wind1808" ] }, + "Web/API/HTMLElement/style": { + "modified": "2020-10-15T21:16:29.287Z", + "contributors": [ + "mfuji09", + "mikimhk", + "Uemmra3", + "momdo", + "fscholz", + "jsx", + "Shoot", + "Marsf", + "Okome" + ] + }, "Web/API/HTMLElement/title": { "modified": "2020-10-15T21:19:51.638Z", "contributors": [ @@ -51148,26 +51162,6 @@ "mikamikuh" ] }, - "orphaned/Web/API/ElementCSSInlineStyle": { - "modified": "2020-10-15T22:32:46.972Z", - "contributors": [ - "mfuji09" - ] - }, - "orphaned/Web/API/ElementCSSInlineStyle/style": { - "modified": "2020-10-15T21:16:29.287Z", - "contributors": [ - "mfuji09", - "mikimhk", - "Uemmra3", - "momdo", - "fscholz", - "jsx", - "Shoot", - "Marsf", - "Okome" - ] - }, "orphaned/Web/API/HTMLElement/forceSpellCheck": { "modified": "2020-10-15T22:22:28.662Z", "contributors": [ diff --git a/files/ja/orphaned/web/api/elementcssinlinestyle/index.html b/files/ja/orphaned/web/api/elementcssinlinestyle/index.html deleted file mode 100644 index 98acea3dc5..0000000000 --- a/files/ja/orphaned/web/api/elementcssinlinestyle/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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 deleted file mode 100644 index 14df7bb6af..0000000000 --- a/files/ja/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/api/htmlelement/index.html b/files/ja/web/api/htmlelement/index.html index 6e26a2465b..56d80d8407 100644 --- a/files/ja/web/api/htmlelement/index.html +++ b/files/ja/web/api/htmlelement/index.html @@ -16,22 +16,24 @@ translation_of: Web/API/HTMLElement

{{InheritanceDiagram}}

-

プロパティ

+

プロパティ

-

親である {{DOMxRef("Element")}} からプロパティを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}, {{DOMxRef("TouchEventHandlers")}} からのプロパティを実装しています。

+

親である {{DOMxRef("Element")}} からプロパティを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} からプロパティを実装しています。

{{DOMxRef("HTMLElement.accessKey")}}
要素に割り当てられたアクセスキーを表す {{DOMxRef("DOMString")}} です。
{{DOMxRef("HTMLElement.accessKeyLabel")}} {{ReadOnlyInline}}
要素に割り当てられたアクセスキーを含む {{DOMxRef("DOMString")}} を返します。
+
{{DOMxRef("HTMLElement.attributeStyleMap")}} {{ReadOnlyInline}}
+
{{DOMxRef("StylePropertyMap")}} で、その要素の {{htmlattrxref("style")}} 属性の宣言を表します。
{{DOMxRef("HTMLElement.contentEditable")}}
{{DOMxRef("DOMString")}}。この文字列が true の場合は要素が編集可能、false の場合は編集不可です。
{{DOMxRef("HTMLElement.isContentEditable")}} {{ReadOnlyInline}}
要素のコンテンツが編集可能か否かを示す {{DOMxRef("Boolean")}} を返します。
{{DOMxRef("HTMLElement.contextMenu")}} {{Deprecated_Inline}}
要素に割り当てたコンテキストメニューを表す {{DOMxRef("HTMLMenuElement")}} です。null になる可能性があります。
-
{{DOMxRef("HTMLOrForeignElement.dataset")}} {{ReadOnlyInline}}
+
{{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}}
要素の カスタムデータ属性 (data-*) を読み書きできるスクリプトの {{DOMxRef("DOMStringMap")}} を返します。
{{DOMxRef("HTMLElement.dir")}}
要素の記述方向を表す dir グローバル属性を反映する {{DOMxRef("DOMString")}} です。可能な値は、"ltr" および "rtl"、"auto" です。
@@ -61,7 +63,7 @@ translation_of: Web/API/HTMLElement
要素の属性およびテキスト、要素のコンテンツの言語を表す {{DOMxRef("DOMString")}} です。
{{DOMxRef("HTMLElement.noModule")}}
{{JSxRef("Boolean")}} であり、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。
-
{{DOMxRef("HTMLOrForeignElement.nonce")}}
+
{{DOMxRef("HTMLElement.nonce")}}
指定されたフェッチが実行を許可されるかどうかを判断するために Content Security Policy が使用する、一度だけ使用される暗号学的な数値を返します。
{{DOMxRef("HTMLElement.offsetHeight")}} {{Experimental_Inline}}{{ReadOnlyInline}}
レイアウトに対して相対的な要素の高さを含む double 値を返します。
@@ -75,11 +77,11 @@ translation_of: Web/API/HTMLElement
レイアウトに対して相対的な要素の幅を含む double 値を返します。
{{DOMxRef("HTMLElement.properties")}} {{Experimental_Inline}}{{ReadOnlyInline}}
{{DOMxRef("HTMLPropertiesCollection")}}… を返します。
-
{{DOMxRef("HTMLElement.spellcheck")}}{{Gecko_MinVersion_Inline("1.9")}}
-
スペルチェック を制御する {{jsxref("Boolean")}} です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。
+
{{DOMxRef("HTMLElement.spellcheck")}}
+
スペルチェック を制御する {{jsxref("Boolean")}} です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。
{{DOMxRef("HTMLElement.style")}}
要素の style 属性の宣言を表すオブジェクトである {{DOMxRef("CSSStyleDeclaration")}} です。
-
{{DOMxRef("HTMLOrForeignElement.tabIndex")}}
+
{{DOMxRef("HTMLElement.tabIndex")}}
タブ順内の要素の位置を表す long 値です。
{{DOMxRef("HTMLElement.title")}}
マウスポインターが要素上に置かれた時に現れるポップアップボックスのテキストを含む {{DOMxRef("DOMString")}} です。
@@ -87,7 +89,7 @@ translation_of: Web/API/HTMLElement
translation を表す {{jsxref("Boolean")}} です。
-

イベントハンドラー

+

イベントハンドラー

ほとんどのイベントハンドラープロパティは、onXYZ の形であり、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} の何れかのインターフェイスで定義されていて、HTMLElement により実装されています。さらに HTMLElement 固有のイベントプロパティがいくつかあります。

@@ -112,24 +114,24 @@ translation_of: Web/API/HTMLElement
{{domxref("Element/touchcancel_event", "touchcancel")}} イベントのイベントハンドリングコードを返します。
-

メソッド

+

メソッド

-

親である {{DOMxRef("Element")}} からメソッドを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}, {{DOMxRef("TouchEventHandlers")}} からのメソッドを実装しています。

+

親である {{DOMxRef("Element")}} からメソッドを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} からのメソッドを実装しています。

{{DOMxRef("HTMLElement.attachInternals()")}} {{Experimental_Inline}}
{{DOMxRef("ElementInternals")}} のインスタンスをカスタム要素に割り当てます。
-
{{DOMxRef("HTMLOrForeignElement.blur()")}}
+
{{DOMxRef("HTMLElement.blur()")}}
現在フォーカスされている要素からキーボードフォーカスを外します。
{{DOMxRef("HTMLElement.click()")}}
要素にマウスクリックイベントを送信します。
-
{{DOMxRef("HTMLOrForeignElement.focus()")}}
+
{{DOMxRef("HTMLElement.focus()")}}
要素に現在のキーボードフォーカスを当てます。
{{DOMxRef("HTMLElement.forceSpellCheck()")}} {{Experimental_Inline}}
要素上のコンテンツに対してスペルチェックを実行します。
-

イベント

+

イベント

これらのイベントを待ち受けするには addEventListener() を用いるか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

@@ -139,7 +141,7 @@ translation_of: Web/API/HTMLElement {{domxref("GlobalEventHandlers/oninvalid", "oninvalid")}} プロパティからも利用できます。 -

アニメーションイベント

+

アニメーションイベント

{{domxref("HTMLElement/animationcancel_event", "animationcancel")}}
@@ -156,7 +158,7 @@ translation_of: Web/API/HTMLElement {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。
-

入力イベント

+

入力イベント

{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}
@@ -168,14 +170,14 @@ translation_of: Web/API/HTMLElement
{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の value が変更され、ユーザーが確定したときに発行されます。{{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、change イベントは要素の value が変更されるたびに発行されるわけではありません。
-

ポインターイベント

+

ポインターイベント

{{domxref("HTMLElement/gotpointercapture_event", "gotpointercapture")}}
{{domxref("Element/setPointerCapture", "setPointerCapture()")}} を用いて要素がポインターをキャプチャしたときに発行されます。
{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} プロパティからも利用できます。
{{domxref("HTMLElement/lostpointercapture_event", "lostpointercapture")}}
-
キャプチャされたポインターが解放されたときに発行されます。
+
キャプチャされたポインターが解放されたときに発行されます。
{{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} プロパティからも利用できます。
{{domxref("HTMLElement/pointercancel_event", "pointercancel")}}
ポインターイベントがキャンセルされたときに発行されます。
@@ -203,7 +205,7 @@ translation_of: Web/API/HTMLElement {{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} プロパティからも利用できます。
-

トランジションイベント

+

トランジションイベント

{{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
@@ -220,55 +222,15 @@ translation_of: Web/API/HTMLElement {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。
-

仕様書

+

仕様書

-

ｓ

+{{Specifications}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}次のプロパティを追加: offsetParent, offsetTop, offsetLeft, offsetWidth, offsetHeight。
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}次のプロパティを追加: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, itemValue。
- 次のメソッドを追加: forceSpellcheck()。
- onXYZ 属性を {{DOMxRef("GlobalEventHandlers")}} インターフェイスへ移動し、そこから継承したプロパティを追加。
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}次のプロパティを追加: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, およびすべての onXYZ プロパティ。
- id と className プロパティを {{DOMxRef("Element")}} インターフェイスへ移動。
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM2 HTML')}} からの変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}初回定義
+

ブラウザーの互換性

-

ブラウザーの互換性

+

{{Compat}}

-

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

- -

関連情報

+

関連情報