From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/htmldetailselement/index.html | 48 ++++++++ .../api/htmldetailselement/toggle_event/index.html | 126 +++++++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 files/ja/web/api/htmldetailselement/index.html create mode 100644 files/ja/web/api/htmldetailselement/toggle_event/index.html (limited to 'files/ja/web/api/htmldetailselement') diff --git a/files/ja/web/api/htmldetailselement/index.html b/files/ja/web/api/htmldetailselement/index.html new file mode 100644 index 0000000000..33fb7304d3 --- /dev/null +++ b/files/ja/web/api/htmldetailselement/index.html @@ -0,0 +1,48 @@ +--- +title: HTMLDetailsElement +slug: Web/API/HTMLDetailsElement +translation_of: Web/API/HTMLDetailsElement +--- +
+

translation in progress

+
+ +
{{APIRef("HTML DOM")}}
+ +

The HTMLDetailsElement interface provides special properties (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating {{HTMLElement("details")}} elements.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDetailsElement.open")}}
+
Is a {{domxref("boolean")}} reflecting the {{htmlattrxref("open", "details")}} HTML attribute, indicating whether or not the element’s contents (not counting the {{HTMLElement("summary")}}) is to be shown to the user.
+
+ +

Methods

+ +

No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/ja/web/api/htmldetailselement/toggle_event/index.html b/files/ja/web/api/htmldetailselement/toggle_event/index.html new file mode 100644 index 0000000000..880b31b439 --- /dev/null +++ b/files/ja/web/api/htmldetailselement/toggle_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'HTMLDetailsElement: toggle イベント' +slug: Web/API/HTMLDetailsElement/toggle_event +tags: + - Event + - HTMLDetailsElement + - Reference + - details + - events + - toggle + - イベント +translation_of: Web/API/HTMLDetailsElement/toggle_event +--- +
{{APIRef}}
+ +

toggle イベントは、 {{HtmlElement("details")}} 要素の open/closed の状態がトグル切り替えされたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティなし
既定のアクション{{HtmlElement("details")}} 要素の open の状態をトグル切り替えする。
+ +

例

+ +

この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。

+ +

HTML

+ +
<aside id="log">
+  <b>Open chapters:</b>
+  <div data-id="ch1" hidden>I</div>
+  <div data-id="ch2" hidden>II</div>
+  <div data-id="ch3" hidden>III</div>
+</aside>
+<section id="summaries">
+  <b>Chapter summaries:</b>
+  <details id="ch1">
+    <summary>Chapter I</summary>
+    Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice.
+  </details>
+  <details id="ch2">
+    <summary>Chapter II</summary>
+    Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away.
+  </details>
+  <details id="ch3">
+    <summary>Chapter III</summary>
+    Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes.
+  </details>
+</section>
+ +

CSS

+ +
body {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+#log {
+  flex-shrink: 0;
+  padding-left: 3em;
+}
+
+#summaries {
+  flex-grow: 1;
+}
+ +

JavaScript

+ +
function logItem(e) {
+  const item = document.querySelector(`[data-id=${e.target.id}]`);
+  item.toggleAttribute('hidden');
+}
+
+const chapters = document.querySelectorAll('details');
+chapters.forEach((chapter) => {
+  chapter.addEventListener('toggle', logItem);
+});
+ +

結果

+ +

{{EmbedLiveSample("Examples", 700, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}}{{Spec2("HTML WHATWG")}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLDetailsElement.toggle_event")}}

-- cgit v1.2.3-54-g00ecf