From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/htmlelement/accesskeylabel/index.html | 84 +++++++ .../htmlelement/animationcancel_event/index.html | 184 ++++++++++++++ .../api/htmlelement/animationend_event/index.html | 182 ++++++++++++++ .../animationiteration_event/index.html | 184 ++++++++++++++ .../htmlelement/animationstart_event/index.html | 181 ++++++++++++++ .../api/htmlelement/beforeinput_event/index.html | 101 ++++++++ .../ja/web/api/htmlelement/change_event/index.html | 147 +++++++++++ files/ja/web/api/htmlelement/click/index.html | 84 +++++++ .../web/api/htmlelement/contenteditable/index.html | 63 +++++ .../ja/web/api/htmlelement/contextmenu/index.html | 44 ++++ files/ja/web/api/htmlelement/dir/index.html | 86 +++++++ .../web/api/htmlelement/forcespellcheck/index.html | 32 +++ .../htmlelement/gotpointercapture_event/index.html | 102 ++++++++ files/ja/web/api/htmlelement/hidden/index.html | 155 ++++++++++++ files/ja/web/api/htmlelement/index.html | 277 +++++++++++++++++++++ files/ja/web/api/htmlelement/innertext/index.html | 91 +++++++ .../ja/web/api/htmlelement/input_event/index.html | 100 ++++++++ .../api/htmlelement/iscontenteditable/index.html | 85 +++++++ files/ja/web/api/htmlelement/lang/index.html | 61 +++++ .../lostpointercapture_event/index.html | 103 ++++++++ .../ja/web/api/htmlelement/offsetheight/index.html | 72 ++++++ files/ja/web/api/htmlelement/offsetleft/index.html | 89 +++++++ .../ja/web/api/htmlelement/offsetparent/index.html | 63 +++++ files/ja/web/api/htmlelement/offsettop/index.html | 62 +++++ .../ja/web/api/htmlelement/offsetwidth/index.html | 70 ++++++ files/ja/web/api/htmlelement/oncopy/index.html | 85 +++++++ files/ja/web/api/htmlelement/oncut/index.html | 64 +++++ files/ja/web/api/htmlelement/onpaste/index.html | 86 +++++++ files/ja/web/api/htmlelement/outertext/index.html | 35 +++ .../api/htmlelement/pointercancel_event/index.html | 109 ++++++++ .../api/htmlelement/pointerdown_event/index.html | 80 ++++++ .../api/htmlelement/pointerenter_event/index.html | 89 +++++++ .../api/htmlelement/pointerleave_event/index.html | 89 +++++++ .../api/htmlelement/pointermove_event/index.html | 98 ++++++++ .../api/htmlelement/pointerout_event/index.html | 89 +++++++ .../api/htmlelement/pointerover_event/index.html | 89 +++++++ .../web/api/htmlelement/pointerup_event/index.html | 89 +++++++ files/ja/web/api/htmlelement/title/index.html | 69 +++++ .../htmlelement/transitioncancel_event/index.html | 97 ++++++++ .../api/htmlelement/transitionend_event/index.html | 95 +++++++ .../api/htmlelement/transitionrun_event/index.html | 144 +++++++++++ .../htmlelement/transitionstart_event/index.html | 136 ++++++++++ 42 files changed, 4245 insertions(+) create mode 100644 files/ja/web/api/htmlelement/accesskeylabel/index.html create mode 100644 files/ja/web/api/htmlelement/animationcancel_event/index.html create mode 100644 files/ja/web/api/htmlelement/animationend_event/index.html create mode 100644 files/ja/web/api/htmlelement/animationiteration_event/index.html create mode 100644 files/ja/web/api/htmlelement/animationstart_event/index.html create mode 100644 files/ja/web/api/htmlelement/beforeinput_event/index.html create mode 100644 files/ja/web/api/htmlelement/change_event/index.html create mode 100644 files/ja/web/api/htmlelement/click/index.html create mode 100644 files/ja/web/api/htmlelement/contenteditable/index.html create mode 100644 files/ja/web/api/htmlelement/contextmenu/index.html create mode 100644 files/ja/web/api/htmlelement/dir/index.html create mode 100644 files/ja/web/api/htmlelement/forcespellcheck/index.html create mode 100644 files/ja/web/api/htmlelement/gotpointercapture_event/index.html create mode 100644 files/ja/web/api/htmlelement/hidden/index.html create mode 100644 files/ja/web/api/htmlelement/index.html create mode 100644 files/ja/web/api/htmlelement/innertext/index.html create mode 100644 files/ja/web/api/htmlelement/input_event/index.html create mode 100644 files/ja/web/api/htmlelement/iscontenteditable/index.html create mode 100644 files/ja/web/api/htmlelement/lang/index.html create mode 100644 files/ja/web/api/htmlelement/lostpointercapture_event/index.html create mode 100644 files/ja/web/api/htmlelement/offsetheight/index.html create mode 100644 files/ja/web/api/htmlelement/offsetleft/index.html create mode 100644 files/ja/web/api/htmlelement/offsetparent/index.html create mode 100644 files/ja/web/api/htmlelement/offsettop/index.html create mode 100644 files/ja/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/ja/web/api/htmlelement/oncopy/index.html create mode 100644 files/ja/web/api/htmlelement/oncut/index.html create mode 100644 files/ja/web/api/htmlelement/onpaste/index.html create mode 100644 files/ja/web/api/htmlelement/outertext/index.html create mode 100644 files/ja/web/api/htmlelement/pointercancel_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerdown_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerenter_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerleave_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointermove_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerout_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerover_event/index.html create mode 100644 files/ja/web/api/htmlelement/pointerup_event/index.html create mode 100644 files/ja/web/api/htmlelement/title/index.html create mode 100644 files/ja/web/api/htmlelement/transitioncancel_event/index.html create mode 100644 files/ja/web/api/htmlelement/transitionend_event/index.html create mode 100644 files/ja/web/api/htmlelement/transitionrun_event/index.html create mode 100644 files/ja/web/api/htmlelement/transitionstart_event/index.html (limited to 'files/ja/web/api/htmlelement') diff --git a/files/ja/web/api/htmlelement/accesskeylabel/index.html b/files/ja/web/api/htmlelement/accesskeylabel/index.html new file mode 100644 index 0000000000..63f93fb974 --- /dev/null +++ b/files/ja/web/api/htmlelement/accesskeylabel/index.html @@ -0,0 +1,84 @@ +--- +title: accessKeyLabel +slug: Web/API/HTMLElement/accessKeyLabel +translation_of: Web/API/HTMLElement/accessKeyLabel +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.accessKeyLabel は読み取り専用プロパティで、 {{jsxref("String")}} で要素に割り当てられたアクセスキーを (あれば) 返します。それ以外の場合は空文字列を返します。

+ +

構文

+ +
label = element.accessKeyLabel
+
+ +

例

+ +

JavaScript

+ +
var node = document.getElementById('btn1');
+if (node.accessKeyLabel) {
+  node.title += ' [' + node.accessKeyLabel + ']';
+} else {
+  node.title += ' [' + node.accessKey + ']';
+}
+
+node.onclick = function () {
+  var p = document.createElement('p');
+  p.textContent = 'Clicked!';
+  node.parentNode.appendChild(p);
+};
+
+ +

HTML

+ +
<button accesskey="h" title="Caption" id="btn1">Hover me</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML WHATWG')}}初回定義から変更なし。
{{SpecName('HTML5.1')}}{{Spec2('HTML5.1')}}削除。 pull w3c/html#144, issue w3c/html#99, WICG discussion.
{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義
+ +

ブラウザーの互換性

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/animationcancel_event/index.html b/files/ja/web/api/htmlelement/animationcancel_event/index.html new file mode 100644 index 0000000000..8547499860 --- /dev/null +++ b/files/ja/web/api/htmlelement/animationcancel_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'HTMLElement: animationcancel イベント' +slug: Web/API/HTMLElement/animationcancel_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - Reference + - animationcancel + - events + - イベント +translation_of: Web/API/HTMLElement/animationcancel_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

animationcancel イベントは、 CSS アニメーションが予期せず中断されたときに発生します。言い換えれば、 {{domxref("HTMLElement/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。

+ +

このイベントのイベントハンドラーは、 {{domxref("GlobalEventHandlers.onanimationcancel", "onanimationcancel")}} プロパティを設定するか、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用することで追加することができます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}
+ +

例

+ +

このコードは現在アニメーションしている要素を取得し、 animationcancel イベントのリスナーを追加します。次に、要素の {{cssxref("display")}} プロパティを none に設定し、 animationcancel イベントを引き起こします。

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationcancel', () => {
+  console.log('アニメーションが取り消されました');
+});
+
+animated.style.display = 'none';
+ +

同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを addEventListener() の代わりに使用するとこうなります。

+ +
const animated = document.querySelector('.animated');
+animated.onanimationcancel = () => {
+  console.log('アニメーションが取り消されました');
+};
+
+animated.style.display = 'none';
+ +

ライブデモ

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
+    </div>
+    <button class="activate" type="button">アニメーションを有効にする</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/animationend_event/index.html b/files/ja/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..6408d73e7f --- /dev/null +++ b/files/ja/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTMLElement: animationend イベント' +slug: Web/API/HTMLElement/animationend_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - CSS3 Animations + - Event + - Reference + - animationend + - イベント +translation_of: Web/API/HTMLElement/animationend_event +--- +
{{APIRef}}
+ +

animationend イベントは、 CSS アニメーションが完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 animationend イベントは発生しません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationend","onanimationend")}}
+ +

例

+ +

この例では、アニメーションしている要素を取得し、animationend イベントを待ち受けします。

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationend', () => {
+  console.log('アニメーション終了');
+});
+ +

同様に、 onanimationend イベントハンドラープロパティを使用するとこうなります。

+ +
const animated = document.querySelector('.animated');
+
+animated.onanimationend = () => {
+  console.log('アニメーション終了');
+};
+ +

ライブデモ

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
+    </div>
+    <button class="activate" type="button">アニメーションを有効にする</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationend")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/animationiteration_event/index.html b/files/ja/web/api/htmlelement/animationiteration_event/index.html new file mode 100644 index 0000000000..5423651c77 --- /dev/null +++ b/files/ja/web/api/htmlelement/animationiteration_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'HTMLElement: animationiteration イベント' +slug: Web/API/HTMLElement/animationiteration_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - Reference + - animationiteration + - イベント +translation_of: Web/API/HTMLElement/animationiteration_event +--- +
{{APIRef}}
+ +

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("HTMLElement/animationend_event", "animationend")}} イベントと同時には発生せず、従って animation-iteration-count が1のアニメーションでは発生しません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}
+ +

例

+ +

このコードは animationiteration を使用して、アニメーションの反復が終了した回数を追跡します。

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.addEventListener('animationiteration', () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+});
+ +

同様に、 onanimationiteration イベントハンドラープロパティを使用するとこうなります。

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.onanimationiteration = () => {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+};
+ +

ライブデモ

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
+    </div>
+    <button class="activate" type="button">アニメーションを有効にする</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/animationstart_event/index.html b/files/ja/web/api/htmlelement/animationstart_event/index.html new file mode 100644 index 0000000000..db76bdad50 --- /dev/null +++ b/files/ja/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,181 @@ +--- +title: 'HTMLElement: animationstart イベント' +slug: Web/API/HTMLElement/animationstart_event +tags: + - API + - Animation + - AnimationEvent + - CSS Animations + - CSS アニメーション + - Event + - HTMLElement + - Reference + - イベント +translation_of: Web/API/HTMLElement/animationstart_event +--- +
{{APIRef}}
+ +

animationstart イベントは、 CSS アニメーションが開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("AnimationEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onanimationstart","onanimationstart")}}
+ +

例

+ +

このコードは animationstart イベントを待ち受けし、イベント発生時にメッセージを記録します。

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationstart', () => {
+  console.log('アニメーション開始');
+});
+
+ +

同様に、 onanimationstart を使用するとこうなります。

+ +
const animated = document.querySelector('.animated');
+
+animated.onanimationstart = () => {
+  console.log('アニメーション開始');
+};
+
+ +

ライブデモ

+ +

HTML

+ +
<div class="animation-example">
+    <div class="container">
+        <p class="animation">あなたは私たちの惑星を訪れるために寒い夜を選びました。</p>
+    </div>
+    <button class="activate" type="button">アニメーションを有効にする</button>
+    <div class="event-log"></div>
+</div>
+
+ +

CSS

+ +
.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+ +

JS

+ +
const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example>.event-log');
+const applyAnimation = document.querySelector('.animation-example>button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () => {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () => {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () => {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationstart")}}{{Spec2("CSS3 Animations")}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html new file mode 100644 index 0000000000..4939f3e9b8 --- /dev/null +++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html @@ -0,0 +1,101 @@ +--- +title: 'HTMLElement: beforeinput イベント' +slug: Web/API/HTMLElement/beforeinput_event +tags: + - DOM + - Event + - Experimental + - InputEvent + - Reference + - beforeinput +translation_of: Web/API/HTMLElement/beforeinput_event +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

DOM の beforeinput イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。

+ +

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{DOMxRef("InputEvent")}}
イベントハンドラプロパティなし
同期 / 非同期同期
Composedはい
デフォルトのアクションDOM 要素の更新
+ +

例

+ +

この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。

+ +

HTML

+ +
<input placeholder="テキストを入力" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}{{Spec2('UI Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/change_event/index.html b/files/ja/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..2449327908 --- /dev/null +++ b/files/ja/web/api/htmlelement/change_event/index.html @@ -0,0 +1,147 @@ +--- +title: 'HTMLElement: change イベント' +slug: Web/API/HTMLElement/change_event +tags: + - Change + - Event + - HTML + - HTML DOM + - HTMLElement + - Reference + - Web +translation_of: Web/API/HTMLElement/change_event +--- +
{{APIRef}}
+ +

change イベントは {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 {{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onchange", "onchange")}}
+ +

変更される要素の種類やユーザーが要素を操作する方法によって、 change イベントは異なる時点で発生します。

+ + + +

HTML 仕様書には、 change イベントを発生させる <input> 型の一覧があります。

+ +

例

+ +

<select> 要素

+ +
+

HTML

+ +
<label>アイスクリームの味:
+  <select class="ice-cream" name="ice-cream">
+    <option value="">1つ選択してください …</option>
+    <option value="chocolate">チョコレート</option>
+    <option value="sardine">イワシ</option>
+    <option value="vanilla">バニラ</option>
+  </select>
+</label>
+
+<div class="result"></div>
+ + + +

JavaScript

+ +
const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) => {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});
+
+
+ +

結果

+ +

{{ EmbedLiveSample('select-example', '100%', '75px') }}

+ +

テキスト入力要素

+ +

<input type="text"> など一部の要素では、コントロールがフォーカスを失うまで change イベントが発生しません。以下のフィールドに何かを入力してから、他の部分をクリックするとイベントが発生します。

+ +

HTML

+ +
<input placeholder="何かテキストを入力" name="name"/>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

すべてのブラウザーにおいて、特定の操作で change イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では {{HTMLElement("select")}} 要素をキーボードで操作すると、 change イベントは Enter を押すか <select> からフォーカスが離れるまで発生しませんでした ({{bug("126379")}} を参照)。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。

+ +

関連情報

diff --git a/files/ja/web/api/htmlelement/click/index.html b/files/ja/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..2f801a0b12 --- /dev/null +++ b/files/ja/web/api/htmlelement/click/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLElement.click() +slug: Web/API/HTMLElement/click +tags: + - API + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLElement/click +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.click() メソッドは、要素のマウスクリックをシミュレートします。

+ +

サポートしている要素（{{HTMLElement("input")}} など）で click() を使用すると、要素の click イベントが発生します。 このイベントは、ドキュメントツリー (またはイベントチェーン) の上位の要素にバブルアップし、click イベントを発生させます。

+ +

構文

+ +
element.click()
+ +

例

+ +

チェックボックスの上にマウスポインタを移動させたときのマウスクリックをシミュレートします。

+ +

HTML

+ +
<form>
+  <input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('click イベントが発生しました')">
+</form>
+ +

JavaScript

+ +
// マウスオーバーで、myFunction を実行します
+function myFunction() {
+  document.getElementById("myCheck").click();
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'interaction.html#dom-click')}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}初期定義
+ +

ブラウザの互換性

+ + + +

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

+ +

関連情報

+ + + +
diff --git a/files/ja/web/api/htmlelement/contenteditable/index.html b/files/ja/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..f845ec1c49 --- /dev/null +++ b/files/ja/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/contentEditable +--- +

{{APIRef("HTML DOM")}}

+ +

{{domxref("HTMLElement")}} インターフェイスの contentEditable プロパティは、要素が編集可能かどうかを指定します。 この列挙属性には、次の値を設定できます。

+ + + +

{{domxref("HTMLElement.isContentEditable")}} プロパティを使用して、このプロパティの計算された {{jsxref("Boolean")}} 値をテストできます。

+ +

構文

+ +
editable = element.contentEditable
+element.contentEditable = 'true'
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

Internet Explorer では、contenteditable を {{htmlelement("table")}}、{{htmlelement("col")}}、{{htmlelement("colgroup")}}、{{htmlelement("tbody")}}、{{htmlelement("td")}}、{{htmlelement("tfoot")}}、{{htmlelement("th")}}、{{htmlelement("thead")}}、および {{htmlelement("tr")}} 要素に直接適用することはできません。 コンテンツを編集可能な {{htmlelement("span")}} または {{htmlelement("div")}} 要素を、表の個々のセル内に配置できます。

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/contextmenu/index.html b/files/ja/web/api/htmlelement/contextmenu/index.html new file mode 100644 index 0000000000..555502b761 --- /dev/null +++ b/files/ja/web/api/htmlelement/contextmenu/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLElement.contextMenu +slug: Web/API/HTMLElement/contextMenu +tags: + - API + - Deprecated + - Element + - HTML + - HTML DOM + - Property + - Reference + - UX +translation_of: Web/API/HTMLElement/contextMenu +--- +
{{APIRef("HTML DOM")}}{{deprecated_header()}} +

HTMLElement.contextMenu プロパティは、{{htmlattrxref("contextmenu")}} 属性を使用して要素に割り当てられたコンテキストメニューを参照します。 メニュー自体は、{{HTMLElement("menu")}} 要素を使用して作成されます。

+ +

構文

+ +
var elementContextMenu = element.contextMenu;
+
+ +

例

+ +
var contextMenu = document.getElementById("element").contextMenu;
+
+// 最初のメニューエントリのラベルを変更する
+contextMenu.firstElementChild.label = "新しいラベル";
+
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + +
diff --git a/files/ja/web/api/htmlelement/dir/index.html b/files/ja/web/api/htmlelement/dir/index.html new file mode 100644 index 0000000000..b8c4c2d963 --- /dev/null +++ b/files/ja/web/api/htmlelement/dir/index.html @@ -0,0 +1,86 @@ +--- +title: HTMLElement.dir +slug: Web/API/HTMLElement/dir +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/dir +--- +
{{ApiRef("HTML DOM")}}
+ +

HTMLElement.dir プロパティは、現在の要素のコンテンツのテキストを書く書字方向を取得または設定します。

+ +

要素のテキストを書く書字方向 (text writing directionality) は、テキストが向かう方向です (異なる言語体系のサポートのため)。 アラビア語とヘブライ語は、 RTL 書字方向を使用する典型的な言語です。

+ +

画像の dir プロパティを "rtl" に設定できます。 この場合、HTML 属性の title と alt は、 "rtl" としてフォーマットされ、定義されます。

+ +

表の dir が "rtl" に設定されている場合、列の順序は右から左に配置されます。

+ +

要素の dir が "auto" に設定されている場合、要素の方向は、最初の明確な書字方向文字 (strong directionality character)、または既定で親要素の書字方向に基づいて決定されます。

+ +

構文

+ +
var currentWritingDirection = elementNodeReference.dir;
+elementNodeReference.dir = newWritingDirection;
+
+ + + +

dir が取り得る値は、左から右への ltr、右から左への rtl、および要素の内容に基づいて要素の方向を決定する必要があることを指定する auto です。

+ +

例

+ +
var parg = document.getElementById("para1");
+parg.dir = "rtl";
+// "para1" として識別される段落のテキストの方向を変更します
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-dir', 'dir')}}{{Spec2('HTML WHATWG')}}{{SpecName('DOM2 HTML')}} からの変更はありません。
{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM1')}} からの変更はありません。
{{SpecName('DOM1', 'level-one-html.html#ID-52460740', 'dir')}}{{Spec2('DOM1')}}初期定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/forcespellcheck/index.html b/files/ja/web/api/htmlelement/forcespellcheck/index.html new file mode 100644 index 0000000000..107b076917 --- /dev/null +++ b/files/ja/web/api/htmlelement/forcespellcheck/index.html @@ -0,0 +1,32 @@ +--- +title: HTMLElement.forceSpellCheck() +slug: Web/API/HTMLElement/forceSpellCheck +tags: + - API + - Experimental + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLElement/forceSpellCheck +--- +

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

+ +

{{domxref("HTMLElement")}} インターフェイスの forceSpellCheck() メソッドは、ユーザーが要素にフォーカスしていない場合でも、HTML 要素のスペルチェックと文法チェックを強制します。 このメソッドは、{{glossary("user agent","ユーザーエージェント")}} の振る舞いをオーバーライドします。 チェックの特定のユーザーインターフェイス（赤い下線が表示されるかどうかなど）は、ユーザーエージェントによって決定されます。

+ +

構文

+ +
element.forceSpellCheck()
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/gotpointercapture_event/index.html b/files/ja/web/api/htmlelement/gotpointercapture_event/index.html new file mode 100644 index 0000000000..423fd520a5 --- /dev/null +++ b/files/ja/web/api/htmlelement/gotpointercapture_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'HTMLElement: gotpointercapture イベント' +slug: Web/API/HTMLElement/gotpointercapture_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/gotpointercapture_event +--- +
{{APIRef}}
+ +

gotpointercapture イベントは、{{domxref("Element.setPointerCapture","setPointerCapture()")}} を使用して要素がポインタをキャプチャしたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティ{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}}
+ +

例

+ +

この例では <p> 要素を取得し、gotpointercapture イベントをリッスンします。 それから、pointerdown イベントの要素に対して setPointerCapture() を呼び出します。 これは gotpointercapture をトリガーします。

+ +
const para = document.querySelector('p');
+
+para.addEventListener('gotpointercapture', () => {
+  console.log('キャプチャされた！')
+});
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

ongotpointercapture イベントハンドラプロパティを使用した同じ例

+ +
const para = document.querySelector('p');
+
+para.ongotpointercapture = () => {
+  console.log('キャプチャされた！')
+};
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-gotpointercapture-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/hidden/index.html b/files/ja/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..390321e26a --- /dev/null +++ b/files/ja/web/api/htmlelement/hidden/index.html @@ -0,0 +1,155 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +tags: + - API + - Attribute + - Element + - HTML + - HTML element + - Property + - Reference + - hidden +translation_of: Web/API/HTMLElement/hidden +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

{{domxref("HTMLElement")}} の hidden プロパティは {{jsxref("Boolean")}}  で、要素が非表示の場合は true で、それ以外の場合は false です。 これは、CSS プロパティの {{cssxref("display")}} を使用して要素の可視性を制御することとはまったく異なります。 hidden プロパティはすべてのプレゼンテーションモードに適用され、ユーザーが直接アクセスできるコンテンツを非表示にするために使用しないでください。

+ +

hidden の適切な使用例は次のとおりです。

+ + + +

不適切な使用例には次のものがあります。

+ + + +
+

hidden でない要素は、hidden 要素にリンクしてはいけません。

+
+ +

構文

+ +
isHidden = HTMLElement.hidden;
+
+
+HTMLElement.hidden = true | false;
+ +

値

+ +

要素がビューから隠されている場合に true になる Boolean。 それ以外の場合、値は false です。

+ +

例

+ +

次に、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

+ +

JavaScript

+ +
document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);
+ +

このコードは、ウェルカムパネルを非表示にして、その場所に "awesome" という名前のフォローアップパネルを表示する、ウェルカムパネルの [OK] ボタンのハンドラを設定します。

+ +

HTML

+ +

2つのボックスの HTML は次のとおりです。

+ +

ウェルカムパネル

+ +
<div id="welcome" class="panel">
+  <h1>Foobar.com へようこそ！</h1>
+  <p>[OK] をクリックすると、あなたは毎日が素晴らしいことに同意します！</p>
+  <button class="button" id="okButton">OK</button>
+</div>
+ +

この HTML は、ユーザーをサイトに歓迎し、[OK] ボタンをクリックして同意していることを伝えるパネルを（{{HTMLElement("div")}} ブロック内に）作成します。

+ +

フォローアップパネル

+ +

ユーザーがウェルカムパネルの [OK] ボタンをクリックすると、JavaScript コードは2つのパネルのそれぞれの hidden の値を変更して2つのパネルを入れ替えます。 フォローアップパネルは、HTML では次のようになります。

+ +
<div id="awesome" class="panel" hidden>
+  <h1>ありがとう！</h1>
+  <p>今日は素晴らしいことに同意してくれてありがとう！
+  さあ、世界をもっと素晴らしいものにするために、
+  そこから出て、素晴らしいことをしてください！</p>
+</div>
+ +

CSS

+ +

コンテンツは、以下の CSS を使用してスタイル設定されます。

+ +
.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', 560, 200) }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/index.html b/files/ja/web/api/htmlelement/index.html new file mode 100644 index 0000000000..acca58a5ab --- /dev/null +++ b/files/ja/web/api/htmlelement/index.html @@ -0,0 +1,277 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - HTMLElement + - Interface + - NeedsNewLayout + - Reference +translation_of: Web/API/HTMLElement +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLElement インターフェイスは、任意の HTML 要素を表します。要素によってはこのインターフェイスで直接実装しており、その他の要素はこれを継承したインターフェイスを通して実装されています。

+ +

{{InheritanceDiagram}}

+ +

プロパティ

+ +

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

+ +
+
{{DOMxRef("HTMLElement.accessKey")}}
+
要素に割り当てられたアクセスキーを表す {{DOMxRef("DOMString")}} です。
+
{{DOMxRef("HTMLElement.accessKeyLabel")}} {{ReadOnlyInline}}
+
要素に割り当てられたアクセスキーを含む {{DOMxRef("DOMString")}} を返します。
+
{{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}}
+
要素の カスタムデータ属性 (data-*) を読み書きできるスクリプトの {{DOMxRef("DOMStringMap")}} を返します。
+
{{DOMxRef("HTMLElement.dir")}}
+
要素の記述方向を表す dir グローバル属性を反映する {{DOMxRef("DOMString")}} です。可能な値は、"ltr" および "rtl"、"auto" です。
+
{{DOMxRef("HTMLElement.draggable")}}
+
要素がドラッグ可能かどうかを示す {{jsxref("Boolean")}} です。
+
{{DOMxRef("HTMLElement.dropzone")}} {{readonlyInline}}
+
dropzone グローバル属性を反映し、要素のドロップ操作に関する動作を記述する {{DOMxRef("DOMSettableTokenList")}} を返します。
+
{{DOMxRef("HTMLElement.hidden")}}
+
要素が hidden か否かを示す {{jsxref("Boolean")}} です。
+
{{DOMxRef("HTMLElement.inert")}}
+
{{JSxRef("Boolean")}} で、ユーザー操作イベント、ページ内テキスト検索 (「ページ内を検索」)、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。
+
{{DOMxRef("HTMLElement.innerText")}}
+
ノードやその子孫の「描画される」テキストの内容を表します。ゲッターとしては、およそユーザーがカーソルで要素の内容を選択してからクリップボードにコピーしたときのテキストに相当します。
+
{{DOMxRef("HTMLElement.itemScope")}} {{Experimental_Inline}}
+
アイテムのスコープを表す {{jsxref("Boolean")}} です。
+
{{DOMxRef("HTMLElement.itemType")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("DOMSettableTokenList")}}… を返します。
+
{{DOMxRef("HTMLElement.itemId")}} {{Experimental_Inline}}
+
アイテム ID を表す {{DOMxRef("DOMString")}} です。
+
{{DOMxRef("HTMLElement.itemRef")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("DOMSettableTokenList")}}… を返します。
+
{{DOMxRef("HTMLElement.itemProp")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("DOMSettableTokenList")}}… を返します。
+
{{DOMxRef("HTMLElement.itemValue")}} {{Experimental_Inline}}
+
アイテムの値を表す {{jsxref("Object")}} を返します。
+
{{DOMxRef("HTMLElement.lang")}}
+
要素の属性およびテキスト、要素のコンテンツの言語を表す {{DOMxRef("DOMString")}} です。
+
{{DOMxRef("HTMLElement.noModule")}}
+
{{JSxRef("Boolean")}} であり、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。
+
{{DOMxRef("HTMLOrForeignElement.nonce")}}
+
指定されたフェッチが実行を許可されるかどうかを判断するために Content Security Policy が使用する、一度だけ使用される暗号学的な数値を返します。
+
{{DOMxRef("HTMLElement.offsetHeight")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
レイアウトに対して相対的な要素の高さを含む double 値を返します。
+
{{DOMxRef("HTMLElement.offsetLeft")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
この要素の左境界線からその offsetParent の左境界線までの距離である double 値を返します。
+
{{DOMxRef("HTMLElement.offsetParent")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
現在計算済みのすべてのオフセット計算値からの要素である {{DOMxRef("Element")}} を返します。
+
{{DOMxRef("HTMLElement.offsetTop")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
要素の上境界線からその offsetParent の上境界線までの距離である double 値を返します。
+
{{DOMxRef("HTMLElement.offsetWidth")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
レイアウトに対して相対的な要素の幅を含む double 値を返します。
+
{{DOMxRef("HTMLElement.properties")}} {{Experimental_Inline}}{{ReadOnlyInline}}
+
{{DOMxRef("HTMLPropertiesCollection")}}… を返します。
+
{{DOMxRef("HTMLElement.spellcheck")}}{{Gecko_MinVersion_Inline("1.9")}}
+
スペルチェック を制御する {{jsxref("Boolean")}} です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。
+
{{DOMxRef("HTMLElement.style")}}
+
要素の style 属性の宣言を表すオブジェクトである {{DOMxRef("CSSStyleDeclaration")}} です。
+
{{DOMxRef("HTMLOrForeignElement.tabIndex")}}
+
タブ順内の要素の位置を表す long 値です。
+
{{DOMxRef("HTMLElement.title")}}
+
マウスポインターが要素上に置かれた時に現れるポップアップボックスのテキストを含む {{DOMxRef("DOMString")}} です。
+
{{DOMxRef("HTMLElement.translate")}} {{Experimental_Inline}}
+
translation を表す {{jsxref("Boolean")}} です。
+
+ +

イベントハンドラー

+ +

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

+ +
+
{{DOMxRef("HTMLElement.oncopy")}} {{Non-standard_Inline}}
+
copy イベントのイベントハンドリングコードを返します ({{bug("280959")}})。
+
{{DOMxRef("HTMLElement.oncut")}} {{Non-standard_Inline}}
+
cut イベントのイベントハンドリングコードを返します ({{bug("280959")}})。
+
{{DOMxRef("HTMLElement.onpaste")}} {{Non-standard_Inline}}
+
paste イベントのイベントハンドリングコードを返します ({{bug("280959")}})。
+
{{DOMxRef("TouchEventHandlers.ontouchstart")}} {{Non-standard_Inline}}
+
{{domxref("Element/touchstart_event", "touchstart")}} イベントのイベントハンドリングコードを返します。
+
{{DOMxRef("TouchEventHandlers.ontouchend")}} {{Non-standard_Inline}}
+
{{domxref("Element/touchend_event", "touchend")}} イベントのイベントハンドリングコードを返します。
+
{{DOMxRef("TouchEventHandlers.ontouchmove")}} {{Non-standard_Inline}}
+
{{domxref("Element/touchmove_event", "touchmove")}} イベントのイベントハンドリングコードを返します。
+
{{DOMxRef("TouchEventHandlers.ontouchenter")}} {{Non-standard_Inline}}
+
{{event("touchenter")}} イベントのイベントハンドリングコードを返します。
+
{{DOMxRef("TouchEventHandlers.ontouchleave")}} {{Non-standard_Inline}}
+
{{event("touchleave")}} イベントのイベントハンドリングコードを返します。
+
{{DOMxRef("TouchEventHandlers.ontouchcancel")}} {{Non-standard_Inline}}
+
{{domxref("Element/touchcancel_event", "touchcancel")}} イベントのイベントハンドリングコードを返します。
+
+ +

メソッド

+ +

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

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

イベント

+ +

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

+ +
+
{{domxref("HTMLElement/invalid_event", "invalid")}}
+
制約の検証で、要素が制約を満たさなかった場合に発行されます。
+ {{domxref("GlobalEventHandlers/oninvalid", "oninvalid")}} プロパティからも利用できます。
+
+ +

アニメーションイベント

+ +
+
{{domxref("HTMLElement/animationcancel_event", "animationcancel")}}
+
アニメーションが予期せず中断されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/animationend_event", "animationend")}}
+
アニメーションが正常に完了したときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/animationiteration_event", "animationiteration")}}
+
アニメーションが 1 回分完了したときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/animationstart_event", "animationstart")}}
+
アニメーションが開始されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。
+
+ +

入力イベント

+ +
+
{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}
+
{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素が変更される前に発行されます。
+
{{domxref("HTMLElement/input_event", "input")}}
+
{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の value が変更されたときに発行されます。
+ {{domxref("GlobalEventHandlers/oninput", "oninput")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/change_event", "change")}}
+
{{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")}}
+
ポインターイベントがキャンセルされたときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerdown_event", "pointerdown")}}
+
ポインターがアクティブになったときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerenter_event", "pointerenter")}}
+
ポインターが要素またはその子孫の一つのヒットテスト境界に入ったときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerleave_event", "pointerleave")}}
+
ポインターが要素のヒットテスト境界から出たときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointermove_event", "pointermove")}}
+
ポインターの座標が変化したときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerout_event", "pointerout")}}
+
ポインターが要素のヒットテスト境界を (他の理由で) 出たときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerover_event", "pointerover")}}
+
ポインターが要素のヒットテスト境界に入ったときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/pointerup_event", "pointerup")}}
+
ポインターがアクティブではなくなったときに発行されます。
+ {{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} プロパティからも利用できます。
+
+ +

トランジションイベント

+ +
+
{{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
+
CSS トランジションがキャンセルされたときに発行されます。
+ {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/transitionend_event", "transitionend")}}
+
CSS トランジションが完了したときに発行されます。
+ {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/transitionrun_event", "transitionrun")}}
+
CSS トランジション が最初に作成されたときに発行されます。
+ {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。
+
{{domxref("HTMLElement/transitionstart_event", "transitionstart")}}
+
CSS トランジションが実際に開始されたときに発行されます。
+ {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。
+
+ +

仕様書

+ +

ｓ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{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("api.HTMLElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/innertext/index.html b/files/ja/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..e5db44dba4 --- /dev/null +++ b/files/ja/web/api/htmlelement/innertext/index.html @@ -0,0 +1,91 @@ +--- +title: HTMLElement.innerText +slug: Web/API/HTMLElement/innerText +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference + - プロパティ +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("HTML DOM")}}
+ +

innerText は {{domxref("HTMLElement")}} のプロパティで、ノードとその子孫の「レンダリングされた」テキスト内容を示します。ゲッターとして、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。

+ +
+

メモ: innerText は {{domxref("Node.textContent")}} と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText はテキストがレンダリングされる表示を意識しますが、 textContent はそうではありません。

+
+ +

構文

+ +
const renderedText = htmlElement.innerText
+htmlElement.innerText = string
+ +

値

+ +

{{domxref("DOMString")}} で、要素の表示されたテキストの内容を表します。要素自身が表示されないとき (例えば、文書から切り離されたり、表示から隠されたりしている場合)、返値は {{domxref("Node.textContent")}} プロパティと同じ値になります。

+ +

例

+ +

この例では innerText と {{domxref("Node.textContent")}} を比較しています。 innerText が {{htmlElement("br")}} 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。

+ +

HTML

+ +
<h3>元の要素:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+  このテキストが<br>どのように扱われるか<br>
+       下で見てみてください。
+  <span style="display:none">隠しテキスト</span>
+</p>
+<h3>textContent の結果:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>innerText の結果:</h3>
+<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
+ +

JavaScript

+ +
const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.value = source.textContent;
+innerTextOutput.value = source.innerText;
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 450)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}導入。 innerText の仕様書の草稿に基づく。履歴は whatwg/html#465 および whatwg/compat#5 を参照。
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/input_event/index.html b/files/ja/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..5b8c2f71cf --- /dev/null +++ b/files/ja/web/api/htmlelement/input_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'HTMLElement: input イベント' +slug: Web/API/HTMLElement/input_event +translation_of: Web/API/HTMLElement/input_event +--- +

{{APIRef}}

+ +

input イベントは、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の value が変更されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("InputEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oninput")}}
+ +

このイベントは、 {{domxref("HTMLElement.contentEditable", "contenteditable")}} を有効にした要素、 {{domxref("Document.designMode", "designMode")}} を有効にしたすべての要素にも適用されます。 contenteditable や designMode の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。

+ +

<input> 要素が type=checkbox または type=radio 型であった場合、 HTML5 仕様書によれば、 input イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに {{domxref("HTMLElement/change_event", "change")}} イベントを使用するようにするかしてください。

+ +
+

注: input イベントは、要素の value の値が変化するたびに発生します。これは、 {{domxref("HTMLElement/change_event", "change")}} イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。

+
+ +

例

+ +

この例では、 {{HtmlElement("input")}} 要素の値が変化するたびに値をログ出力します。

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/iscontenteditable/index.html b/files/ja/web/api/htmlelement/iscontenteditable/index.html new file mode 100644 index 0000000000..19ea1d2d5e --- /dev/null +++ b/files/ja/web/api/htmlelement/iscontenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: HTMLElement.isContentEditable +slug: Web/API/HTMLElement/isContentEditable +tags: + - API + - Editing + - HTML DOM + - HTMLElement + - Property + - Read-only + - Reference + - プロパティ + - 編集 + - 読取専用 +translation_of: Web/API/HTMLElement/isContentEditable +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.isContentEditable は読み取り専用のプロパティで、 {{jsxref("Boolean")}} 型で、要素の内容が編集可能な場合は true を返します。それ以外の場合は false を返します。

+ +

構文

+ +
editable = element.isContentEditable
+
+ +

例

+ +

HTML

+ +
<p id="myText1">編集不可能な段落</p>
+<p id="myText2" contentEditable="true">編集可能な段落</p>
+
+<p id="infoText1">最初の段落を編集できますか？</p>
+<p id="infoText2">2番目の段落を編集できますか？</p>
+ +

JavaScript

+ +
document.getElementById('infoText1').innerHTML += document.getElementById('myText1').isContentEditable;
+document.getElementById('infoText2').innerHTML += document.getElementById('myText2').isContentEditable;
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし
{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/lang/index.html b/files/ja/web/api/htmlelement/lang/index.html new file mode 100644 index 0000000000..bd94498888 --- /dev/null +++ b/files/ja/web/api/htmlelement/lang/index.html @@ -0,0 +1,61 @@ +--- +title: HTMLElement.lang +slug: Web/API/HTMLElement/lang +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/lang +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.lang プロパティは、要素の属性値とテキストコンテンツの基本言語を取得または設定します。

+ +

このプロパティによって返される言語コードは、IETF 文書の言語を識別するタグ（BCP47）（英語）で定義されています。 一般的な例には、英語の "en"、日本語の "ja"、スペイン語の "es" などがあります。 この属性のデフォルト値は unknown（不明）です。 この属性は、ここで説明する個々の要素レベルで有効ですが、ほとんどの場合、ドキュメントのルート要素に対して指定されます。

+ +

これも lang 属性でのみ機能し、xml:lang では機能しません。

+ +

構文

+ +
var languageUsed = elementNodeReference.lang; // lang の値を取得
+elementNodeReference.lang = NewLanguage; // lang に新しい値を設定
+
+ +

languageUsed は、現在の要素のテキストを記述している言語を取得する文字列変数です。 NewLanguage は、現在の要素のテキストを記述している言語を設定する値を持つ文字列変数です。

+ +

例

+ +
// このスニペットは基本言語を比較し、
+// 言語に基づいて別の URL にリダイレクトするものです
+if (document.documentElement.lang === "en") {
+  window.location.href = "Some_document.html.en";
+} else if (document.documentElement.lang === "ru") {
+  window.location.href = "Some_document.html.ru";
+}
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'lang')}}{{Spec2('DOM2 HTML')}}
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/api/htmlelement/lostpointercapture_event/index.html b/files/ja/web/api/htmlelement/lostpointercapture_event/index.html new file mode 100644 index 0000000000..4491291c79 --- /dev/null +++ b/files/ja/web/api/htmlelement/lostpointercapture_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'HTMLElement: lostpointercapture イベント' +slug: Web/API/HTMLElement/lostpointercapture_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/lostpointercapture_event +--- +
{{APIRef}}
+ +

lostpointercapture イベントは、キャプチャされたポインタが解放されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonlostpointercapture
+ +

例

+ +

この例では、要素の lostpointercapture イベントをリッスンし、pointerdown で要素のポインタをキャプチャします。 その後ユーザーがポインタを離すと、lostpointercapture イベントが発生します。

+ +
const para = document.querySelector('p');
+
+para.addEventListener('lostpointercapture', () => {
+  console.log('解放された！')
+});
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

同じ例ですが、onlostpointercapture イベントハンドラプロパティを使用します。

+ +
const para = document.querySelector('p');
+
+para.onlostpointercapture = () => {
+  console.log('解放された！')
+};
+
+para.addEventListener('pointerdown', (event) => {
+  para.setPointerCapture(event.pointerId);
+});
+
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-lostpointercapture-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/offsetheight/index.html b/files/ja/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..b2b4037ecc --- /dev/null +++ b/files/ja/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - API + - CSSOM View + - Property + - Reference +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetHeight 読み取り専用プロパティは、垂直パディングや境界線を含む要素の高さを整数として返します。

+ +

通常、offsetHeight は、境界線、パディング、および水平スクロールバー（レンダリングされている場合）を含む、要素の CSS height のピクセル単位の測定値です。 ::before や ::after などの擬似要素の高さは含まれません。 ドキュメントの body オブジェクトの場合、測定値には、要素の CSS height ではなく、線形コンテンツの高さの合計が含まれます。 他の線形コンテンツの下に広がる浮動要素は無視されます。

+ +

（例えば、要素またはその祖先のいずれかで style.display を "none" に設定することにより）要素が非表示の場合、0 が返されます。

+ +
+

このプロパティは、値を整数に丸めます。 小数値が必要な場合は、{{ domxref("element.getBoundingClientRect()") }} を使用します。

+
+ +

構文

+ +
var intElemOffsetHeight = element.offsetHeight;
+ +

intElemOffsetHeight は、要素の offsetHeight ピクセル値に対応する整数を格納する変数です。 offsetHeight プロパティは読み取り専用です。

+ +

例

+ +

             Image:Dimensions-offset.png

+ +

上のサンプル画像は、スクロールバーにより、ウィンドウに収まる場合の offsetHeight を示しています。 ただし、スクロールできない要素には、目に見えるコンテンツよりもはるかに大きい大きな offsetHeight 値が含まれる場合があります。 これらの要素は通常、スクロール可能な要素内に含まれています。 その結果、これらの非スクロール要素は、スクロール可能なコンテナの scrollTop の設定に応じて、完全にまたは部分的に非表示になる場合があります。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSSOM View', '#dom-htmlelement-offsetheight', 'offsetHeight')}}{{Spec2('CSSOM View')}}
+ +

ノート

+ +

offsetHeight は、MSIE によって最初に導入された DHTML オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの高さ（border-box height）と呼ばれることもあります。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/offsetleft/index.html b/files/ja/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..e0aff57121 --- /dev/null +++ b/files/ja/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,89 @@ +--- +title: HTMLElement.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +tags: + - API + - CSSOM View + - Property + - Read-only + - Reference +translation_of: Web/API/HTMLElement/offsetLeft +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetLeft プロパティは読み取り専用で、現在の要素の左上隅が {{domxref("HTMLElement.offsetParent")}} ノード内の左へのオフセットをピクセル数を返します。

+ +

ブロックレベル要素では、 offsetTop, offsetLeft, offsetWidth, offsetHeight が offsetParent からの相対的な要素の境界ボックスを記述します。

+ +

しかし、 (span などの) インラインレベル要素は行をまたいで折り返すことがあるので、 offsetTop および offsetLeft は最初の境界ボックス (その幅と高さを取得するには {{domxref("Element.getClientRects()")}} を使用) の位置を記述するのに対し、 offsetWidth および offsetHeight は囲む境界ボックス (位置を取得するには {{domxref("Element.getBoundingClientRect()")}} を使用) の寸法を記述します。したがって、 offsetLeft, offsetTop, offsetWidth, offsetHeight による左、上、幅、高さは折り返されたテキストの区間を囲むボックスにはなりません。

+ +

構文

+ +
left = element.offsetLeft;
+
+ +

left は整数で、最も近くの相対配置された親要素からの左へのオフセットをピクセル数で表します。

+ +

例

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // large left offset: do something here
+}
+
+ +

この例は、 div 内で折り返す「長い」文を青い境界線で表示し、 span の境界を記述すると考えられるものを赤いボックスで表示します。

+ +

Image:offsetLeft.jpg

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps within this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight + "px";
+</script>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/offsetparent/index.html b/files/ja/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..a2e338f0f5 --- /dev/null +++ b/files/ja/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLElement.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - API + - CSSOM View + - NeedsMarkupWork + - Property + - Reference + - プロパティ +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ APIRef("HTML DOM") }}

+ +

HTMLElement.offsetParent は読み取り専用プロパティで、要素を含む最も近くにある (包含階層で最も近い) 位置指定されたオブジェクトへの参照を返します。要素が位置指定されていない (静的位置指定の) 場合、最も近い祖先である td, th, table を返し、表要素の祖先がない場合は body を返します。

+ +
+

注:

+ +

次の状況では、offsetParent は null を返します。

+ + +
+ +

offsetParent が有用なのは、 {{domxref("HTMLElement.offsetTop","offsetTop")}} と {{domxref("HTMLElement.offsetLeft","offsetLeft")}} がパディング境界からの相対だからです。

+ +

構文

+ +
parentObj = element.offsetParent;
+
+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}{{Spec2('CSSOM View')}}
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/api/htmlelement/offsettop/index.html b/files/ja/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..76d4588b63 --- /dev/null +++ b/files/ja/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.offsetTop +slug: Web/API/HTMLElement/offsetTop +tags: + - API + - CSSOM View + - Property + - Read-only + - Reference +translation_of: Web/API/HTMLElement/offsetTop +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetTop 読み取り専用プロパティは、{{domxref("element.offsetParent","offsetParent")}} ノードの上端に対して現在の要素の距離を返します。

+ +

構文

+ +
topPos = element.offsetTop;
+ +

引数

+ + + +

例

+ +
var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos > 10) {
+  // 要素が offsetParent から 11px 以上離れている場合の処理をここに記述
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}}
+ +

ブラウザー互換性

+ + + +

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

+ +

仕様に従って、要素が非表示 (この要素または任意の祖先の style.display が "none")である場合、または要素自体の style.position が "fixed" に設定される場合、このプロパティは WebKit で null を返します。

+ +

このプロパティは、要素自体の style.position が "fixed" に設定されている場合、Internet Explorer (9) で null を返します。(display:none であってもこのブラウザに影響しません。)

diff --git a/files/ja/web/api/htmlelement/offsetwidth/index.html b/files/ja/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..0cb4ed2322 --- /dev/null +++ b/files/ja/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: HTMLElement.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +tags: + - API + - CSSOM View + - Property + - Read-only + - Reference +translation_of: Web/API/HTMLElement/offsetWidth +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetWidth 読み取り専用プロパティは、要素のレイアウト幅を整数として返します。

+ +

通常、offsetWidth は、境界線、パディング、および垂直スクロールバー（レンダリングされている場合）を含む、要素の CSS width のピクセル単位の測定値です。 ::before や ::after などの擬似要素の幅は含まれません。

+ +

（例えば、要素またはその祖先のいずれかで style.display を "none" に設定することにより）要素が非表示の場合、0 が返されます。

+ +

構文

+ +
var intElemOffsetWidth = element.offsetWidth;
+
+ +

intElemOffsetWidth は、要素の offsetWidth ピクセル値に対応する整数を格納する変数です。 offsetWidth プロパティは読み取り専用です。

+ +
+

このプロパティは、値を整数に丸めます。 小数値が必要な場合は、{{ domxref("element.getBoundingClientRect()") }} を使用します。

+
+ +

例

+ +

Image:Dimensions-offset.png

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}{{Spec2('CSSOM View')}}
+ +

ノート

+ +

offsetWidth は、MSIE によって最初に導入された DHTML オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの幅（border-box width）と呼ばれることもあります。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/oncopy/index.html b/files/ja/web/api/htmlelement/oncopy/index.html new file mode 100644 index 0000000000..52f3c816f6 --- /dev/null +++ b/files/ja/web/api/htmlelement/oncopy/index.html @@ -0,0 +1,85 @@ +--- +title: HTMLElement.oncopy +slug: Web/API/HTMLElement/oncopy +tags: + - API + - Event Handler + - Experimental + - HTMLElement + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/HTMLElement/oncopy +--- +
{{ APIRef("HTML DOM") }}{{SeeCompatTable}} {{ Fx_minversion_header(3) }}
+ +

oncopy プロパティは {{domxref("HTMLElement")}} インターフェイスのプロパティで、 {{domxref("Element/copy_event", "copy")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

copy イベントはユーザーがテキストをコピーしようとしたときに発生します。

+ +

構文

+ +
target.oncopy = functionRef;
+ +

値

+ +

functionRef は関数名または関数式です。この関数は {{domxref("ClipboardEvent")}} オブジェクトを唯一の引数として受け取ります。

+ +

例

+ +

この例では、 {{htmlElement("textarea")}} からのすべてのコピーと貼り付けをブロックします。

+ +

HTML

+ +
<h3>Play with this text area:</h3>
+<textarea id="editor" rows="3">Try copying and pasting text into this field!</textarea>
+
+<h3>Log:</h3>
+<p id="log"></p>
+ +

JavaScript

+ +
const log = document.getElementById('log');
+
+function logCopy(event) {
+  log.innerText = 'Copy blocked!\n' + log.innerText;
+  event.preventDefault();
+}
+
+function logPaste(event) {
+  log.innerText = 'Paste blocked!\n' + log.innerText;
+  event.preventDefault();
+}
+
+const editor = document.getElementById('editor');
+
+editor.oncopy = logCopy;
+editor.onpaste = logPaste;
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 300)}}

+ +

仕様書

+ +

WHATWG Standard

+ +

ブラウザーの互換性

+ + + +

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

+ +

Firefox 13 から、この機能は設定 dom.event.clipboardevents.enabled で制御されます。既定値は true ですが無効化できます。

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/oncut/index.html b/files/ja/web/api/htmlelement/oncut/index.html new file mode 100644 index 0000000000..81c6f5d9d6 --- /dev/null +++ b/files/ja/web/api/htmlelement/oncut/index.html @@ -0,0 +1,64 @@ +--- +title: element.oncut +slug: Web/API/HTMLElement/oncut +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/HTMLElement/oncut +--- +

 

+

{{ Fx_minversion_header(3) }} {{ ApiRef() }} {{ 英語版章題("Summary") }}

+

概要

+

oncut プロパティは、現在の要素での onCut イベントハンドラのコードを返します。

+

{{ 英語版章題("Syntax") }}

+

構文

+
element.oncut =functionRef;
+
+

ここでの + + functionRef + は、関数です。それは、たいてい、他の場所で宣言された関数の名前、あるいは、 + + function 式 + です。Core JavaScript 1.5 Reference:Functions を参照してください。

+

{{ 英語版章題("Example") }}

+

例

+
<html>
+<head>
+<title>oncut event example</title>
+
+<script>
+  function log(txt)
+  {
+    document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
+  }
+</script>
+</head>
+
+<body>
+<h3>Play with this editor!</h3>
+<textarea rows="3" cols="80" oncopy="log('Copied!');" oncut="log('Cut blocked!'); return false;">
+  Try copying and cutting the text in this area!
+</textarea>
+<h3>Log</h3>
+<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
+</body>
+</html>
+
+

この例では、テキストエリアからテキストをコピーすることはできますが、切り取ることはできません。また、コピーと切り取りの試みのログを表示します。

+

{{ 英語版章題("Notes") }}

+

注記

+

このイベントは、ユーザがテキストを切り取ろうとしたときに発生します。

+

{{ 英語版章題("Specification") }}

+

仕様

+

仕様の一部ではありません。

+

{{ 英語版章題("See also") }}

+

参照

+ +
+  
+

{{ languages( { "en": "en/DOM/element.oncut" } ) }}

diff --git a/files/ja/web/api/htmlelement/onpaste/index.html b/files/ja/web/api/htmlelement/onpaste/index.html new file mode 100644 index 0000000000..71c5e05538 --- /dev/null +++ b/files/ja/web/api/htmlelement/onpaste/index.html @@ -0,0 +1,86 @@ +--- +title: HTMLElement.onpaste +slug: Web/API/HTMLElement/onpaste +tags: + - API + - API + - HTMLElement + - HTMLElement + - イベントハンドラー + - イベントハンドラー + - プロパティ + - プロパティ + - リファレンス + - 標準外 +translation_of: Web/API/HTMLElement/onpaste +--- +
{{ APIRef("HTML DOM") }} {{Non-standard_header}}
+ +

onpaste プロパティは、現在の要素の onPaste イベントハンドラーを返します。 {{event("paste")}} の W3C 草稿を参照してください。

+ +

構文

+ +
element.onpaste = functionRef;
+ +

ここでの functionRef は関数です。それはたいてい、他の場所で宣言された関数の名前、あるいは function 式です。詳しくは JavaScript リファレンス:Functions を参照してください。

+ +

例

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>onpaste event example</title>
+</head>
+
+<body>
+<h1>Play with this editor!</h1>
+<textarea id="editor" rows="3" cols="80">
+Try pasting text into this area!
+</textarea>
+
+<script>
+function log(txt) {
+  document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
+}
+
+function pasteIntercept(evt) {
+  log("Pasting!");
+}
+
+document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
+</script>
+
+<h2>Log</h2>
+<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
+</body>
+</html>
+ +

この例は、テキストエリアへの貼り付けのログを表示します。

+ +

メモ

+ +

このイベントは、ユーザがテキストを貼り付けしようとしたときに発生します。

+ +

Firefox 13 から、この機能は設定 dom.event.clipboardevents.enabled で制御されます。既定値は true ですが無効化できます。

+ +

仕様書

+ +

仕様の一部ではありません。

+ +

メモ

+ +

現在、 DOM だけでペーストされたテキストを得る方法はありません。その情報を得るためには {{ Interface("nsIClipboard") }} を用いる必要があります。

+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/outertext/index.html b/files/ja/web/api/htmlelement/outertext/index.html new file mode 100644 index 0000000000..c672be742e --- /dev/null +++ b/files/ja/web/api/htmlelement/outertext/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLElement.outerText +slug: Web/API/HTMLElement/outerText +tags: + - API + - DOM + - Non-standard + - Property + - Reference +translation_of: Web/API/HTMLElement/outerText +--- +
{{APIRef("DOM")}} {{ Non-standard_header() }}
+ +

HTMLElement.outerText は非標準のプロパティです。 取得するときは、{{domxref("Node.innerText")}} と同じ値を返します。 設定するときは、現在のノードを取り除き、指定されたテキストに置き換えます。

+ +

例

+ +

StackOverflow の回答（英語）をご覧ください。

+ +

仕様

+ +

仕様の一部ではありません。 標準化への議論: whatwg/html#668。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointercancel_event/index.html b/files/ja/web/api/htmlelement/pointercancel_event/index.html new file mode 100644 index 0000000000..a5d55aa305 --- /dev/null +++ b/files/ja/web/api/htmlelement/pointercancel_event/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTMLElement: pointercancel イベント' +slug: Web/API/HTMLElement/pointercancel_event +tags: + - DOM + - Event + - Pointer Events + - PointerEvent + - Reference + - pointercancel + - user input +translation_of: Web/API/HTMLElement/pointercancel_event +--- +
{{APIRef}}
+ +

pointercancel イベントは、これ以上ポインタイベントがないとブラウザーが判断したとき、または {{event("pointerdown")}} イベントが発生した後に、パン、ズーム、スクロールによってビューポートを操作するためにポインタを使用する場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointercancel
+ +

pointercancel イベントを引き起こす状況の例

+ + + +
+

pointercancel イベントが発生した後、ブラウザーは {{event("pointerout")}} とそれに続く {{event("pointerleave")}} も送信します。

+
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointercancel', (event) => {
+  console.log('ポインタイベントがキャンセルされた');
+});
+ +

onpointercancel イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointercancel = (event) => {
+  console.log('ポインタイベントがキャンセルされた');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointercancel-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointerdown_event/index.html b/files/ja/web/api/htmlelement/pointerdown_event/index.html new file mode 100644 index 0000000000..2f709b5981 --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerdown_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLElement: pointerdown イベント' +slug: Web/API/HTMLElement/pointerdown_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerdown_event +--- +
{{APIRef}}
+ +

pointerdown イベントは、ポインタがアクティブになったときに発生します。 マウスの場合は、ボタンが押されていない状態から少なくとも1つのボタンが押された状態に移行したときに発生します。 タッチの場合は、物理的な接触がデジタイザとなされたときに発生します。 ペンの場合は、スタイラスがデジタイザと物理的に接触したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerdown
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerdown', (event) => {
+  console.log('ポインタダウンイベント');
+});
+ +

onpointerdown イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerdown = (event) => {
+  console.log('ポインタダウンイベント');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerdown-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointerenter_event/index.html b/files/ja/web/api/htmlelement/pointerenter_event/index.html new file mode 100644 index 0000000000..547cc35bc1 --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerenter_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'HTMLElement: pointerenter イベント' +slug: Web/API/HTMLElement/pointerenter_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerenter_event +--- +
{{APIRef}}
+ +

pointerenter イベントは、ポインティングデバイスが要素またはその子孫の1つのヒットテスト境界内に移動したときに発生します。 これには、ホバーをサポートしていないデバイスからの {{event("pointerdown")}} イベントの結果も含まれます（{{event("pointerdown")}} を参照）。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerenter
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerenter', (event) => {
+  console.log('ポインタが要素に進入しました');
+});
+ +

onpointerenter イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerenter = (event) => {
+  console.log('ポインタが要素に進入しました');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerenter-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointerleave_event/index.html b/files/ja/web/api/htmlelement/pointerleave_event/index.html new file mode 100644 index 0000000000..68cf610095 --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerleave_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'HTMLElement: pointerleave イベント' +slug: Web/API/HTMLElement/pointerleave_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerleave_event +--- +
{{APIRef}}
+ +

pointerleave イベントは、ポインティングデバイスが要素のヒットテスト境界から外れると発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザによって検出可能なホバー範囲を離れたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerleave
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerleave', (event) => {
+  console.log('ポインタが要素から離脱しました');
+});
+ +

onpointerleave イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerleave = (event) => {
+  console.log('ポインタが要素から離脱しました');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerleave-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointermove_event/index.html b/files/ja/web/api/htmlelement/pointermove_event/index.html new file mode 100644 index 0000000000..7567c14ced --- /dev/null +++ b/files/ja/web/api/htmlelement/pointermove_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'HTMLElement: pointermove イベント' +slug: Web/API/HTMLElement/pointermove_event +tags: + - Event + - HTML DOM + - HTMLElement + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointermove_event +--- +
{{APIRef}}
+ +

pointermove イベントは、ポインターの座標が変更され、ブラウザーの touch-action によってポインターがキャンセルされていない場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}}
+ +

使用上の注意

+ +

{{domxref("PointerEvent")}} 型のイベントは、ポインティングデバイスによるユーザーの対話に必要なすべての情報を提供します。位置、移動距離、ボタンの状態などです。

+ +

例

+ +

pointermove イベントのハンドラーを {{domxref("EventTarget.addEventListener", "addEventListener()")}} で追加する場合です。

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointermove', (event) => {
+  console.log('ポインターが移動しました');
+});
+ +

onpointermove イベントハンドラープロパティを使用することもできます。

+ +
const para = document.querySelector('p');
+
+para.onpointermove = (event) => {
+  console.log('ポインターが移動しました');
+};
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Pointer Events', '#the-pointermove-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + + +

Internet Explorer は、MSPointerHover という名前のイベントもサポートしていました。 これは、接触（通常はペン）が表面に触れずに要素上を移動したときに発生します。 この独自の方法は Internet Explorer に固有のものであり、Internet Explorer 11 以降、推奨されなくなりました。 IE11 以降では、pointermove イベントがすべてのペンの動きに対して発生します（ホバーしているかどうかにかかわらず）。

diff --git a/files/ja/web/api/htmlelement/pointerout_event/index.html b/files/ja/web/api/htmlelement/pointerout_event/index.html new file mode 100644 index 0000000000..df2a3342c9 --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerout_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'HTMLElement: pointerout イベント' +slug: Web/API/HTMLElement/pointerout_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerout_event +--- +
{{APIRef}}
+ +

pointerout イベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界から外れた。 ホバーをサポートしていないデバイスに {{event("pointerup")}} イベントが発生した（{{event("pointerup")}} を参照）。 {{event("pointercancel")}} イベントの発生後（{{event("pointercancel")}} を参照）。 ペンスタイラスがデジタイザによって検出可能なホバー範囲を離脱したとき。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerout
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerout', (event) => {
+  console.log('ポインタが外に移動しました');
+});
+ +

onpointerout イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerout = (event) => {
+  console.log('ポインタが外に移動しました');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerout-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointerover_event/index.html b/files/ja/web/api/htmlelement/pointerover_event/index.html new file mode 100644 index 0000000000..cf37b5be9a --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerover_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'HTMLElement: pointerover イベント' +slug: Web/API/HTMLElement/pointerover_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerover_event +--- +
{{APIRef}}
+ +

pointerover イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerover
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerover', (event) => {
+  console.log('ポインタが内に移動しました');
+});
+ +

onpointerover イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerover = (event) => {
+  console.log('ポインタが内に移動しました');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerover-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/pointerup_event/index.html b/files/ja/web/api/htmlelement/pointerup_event/index.html new file mode 100644 index 0000000000..dcbddd385e --- /dev/null +++ b/files/ja/web/api/htmlelement/pointerup_event/index.html @@ -0,0 +1,89 @@ +--- +title: 'HTMLElement: pointerup イベント' +slug: Web/API/HTMLElement/pointerup_event +tags: + - DOM + - Event + - PointerEvent + - Reference +translation_of: Web/API/HTMLElement/pointerup_event +--- +
{{APIRef}}
+ +

pointerup イベントは、ポインタがアクティブでなくなったときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("PointerEvent")}}
イベントハンドラプロパティonpointerup
+ +

例

+ +

addEventListener() を使用する場合

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointerup', (event) => {
+  console.log('ポインタアップ');
+});
+ +

onpointerup イベントハンドラプロパティを使用する場合

+ +
const para = document.querySelector('p');
+
+para.onpointerup = (event) => {
+  console.log('ポインタアップ');
+};
+ +

仕様

+ + + + + + + + + + + + +
仕様状態
{{SpecName('Pointer Events', '#the-pointerup-event')}}{{Spec2('Pointer Events')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/title/index.html b/files/ja/web/api/htmlelement/title/index.html new file mode 100644 index 0000000000..6f90c74316 --- /dev/null +++ b/files/ja/web/api/htmlelement/title/index.html @@ -0,0 +1,69 @@ +--- +title: HTMLElement.title +slug: Web/API/HTMLElement/title +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/title +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.title プロパティは、要素のタイトルを表します。 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。

+ +

構文

+ +
var str = element.title;
+element.title = str;
+
+ +

例

+ +
const link = document.createElement('a');
+link.innerText = 'ブドウ';
+link.href = 'https://ja.wikipedia.org/wiki/ブドウ';
+link.title = 'ブドウに関するウィキペディアのページ';
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', '#dom-title', 'title')}}{{Spec2('HTML WHATWG')}}{{SpecName('DOM2 HTML')}} からの変更なし。
{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM1')}} からの変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}{{Spec2('DOM1')}}初期定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/transitioncancel_event/index.html b/files/ja/web/api/htmlelement/transitioncancel_event/index.html new file mode 100644 index 0000000000..f83b5f4643 --- /dev/null +++ b/files/ja/web/api/htmlelement/transitioncancel_event/index.html @@ -0,0 +1,97 @@ +--- +title: 'HTMLElement: transitioncancel イベント' +slug: Web/API/HTMLElement/transitioncancel_event +tags: + - CSS Transitions + - CSS トランジション + - DOM + - Event + - HTMLElement + - Reference + - TransitionEvent + - events + - transitioncancel + - イベント +translation_of: Web/API/HTMLElement/transitioncancel_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitioncancel イベントは、 CSS トランジションがキャンセルされたときに発生します。

+ +

詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+ +

例

+ +

このコードは、トランジションが定義され、 transitioncancel イベントにリスナーを追加した要素を取得します。

+ +
const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitioncancel', () => {
+  console.log('Transition canceled');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを addEventListener() の代わりに使用すると以下のようになります。

+ +
const transition = document.querySelector('.transition');
+
+transition.ontransitioncancel = () => {
+  console.log('Transition canceled');
+};
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/transitionend_event/index.html b/files/ja/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..f83e0644b6 --- /dev/null +++ b/files/ja/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,95 @@ +--- +title: 'HTMLElement: transitionend イベント' +slug: Web/API/HTMLElement/transitionend_event +tags: + - CSS Transitions + - CSS トランジション + - DOM + - Event + - Reference + - TransitionEvent + - Web + - events + - transitionend + - イベント + - ウェブ +translation_of: Web/API/HTMLElement/transitionend_event +--- +
{{APIRef}}
+ +

transitionend イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり {{cssxref("display")}} が none に設定されたりした場合、このイベントは生成されません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+ +

例

+ +

このコードは、トランジションが定義されており、 transitionend イベントにリスナーを追加している要素を取得します。

+ +
const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () => {
+  console.log('トランジション終了');
+});
+ +

同様に、 {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} を使用した例です。

+ +
const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () => {
+  console.log('トランジション終了');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/transitionrun_event/index.html b/files/ja/web/api/htmlelement/transitionrun_event/index.html new file mode 100644 index 0000000000..18733814d9 --- /dev/null +++ b/files/ja/web/api/htmlelement/transitionrun_event/index.html @@ -0,0 +1,144 @@ +--- +title: 'HTMLElement: transitionrun イベント' +slug: Web/API/HTMLElement/transitionrun_event +tags: + - CSS Transitions + - CSS トランジション + - DOM + - Event + - Reference + - Transitions + - Web + - events + - transitionrun + - イベント + - ウェブ + - トランジション +translation_of: Web/API/HTMLElement/transitionrun_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち、 {{cssxref("transition-delay")}} が始まる前に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}}
+ +

例

+ +

このコードは transitionrun イベントのリスナーを追加します。

+ +
el.addEventListener('transitionrun', () => {
+  console.log('Transition is running but hasn\'t necessarily started transitioning yet');
+});
+ +

同じですが、 ontransitionrun プロパティを addEventListener() の代わりに使用した例です。

+ +
el.ontransitionrun = () => {
+  console.log('Transition started running, and will start transitioning when the transition delay has expired');
+};
+ +
+

ライブ例

+ +

以下の例では、単純な {{htmlelement("div")}} 要素を用い、遅延を含むトランジションでスタイル付けしています。

+ +
<div class="transition">Hover over me</div>
+<div class="message"></div>
+ +
.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}
+ +

このために、 {{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "transitionrun")}} イベントが発生する場所を示す JavaScript を追加します。

+ +
const el = document.querySelector('.transition');
+const message = document.querySelector('.message');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+
+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+
+ +

相違点は以下のとおりです。

+ + + +

transitionrun は、遅延時間が終わる前にトランジションが中止されたときにも発生します。トランジションの遅延時間がなかったり、 transition-delay が負の数であった場合には、 transitionrun と transitionstart の両方が発生します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitionrun', 'transitionrun')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/transitionstart_event/index.html b/files/ja/web/api/htmlelement/transitionstart_event/index.html new file mode 100644 index 0000000000..b345251185 --- /dev/null +++ b/files/ja/web/api/htmlelement/transitionstart_event/index.html @@ -0,0 +1,136 @@ +--- +title: 'HTMLElement: transitionstart イベント' +slug: Web/API/HTMLElement/transitionstart_event +tags: + - CSS Transitions + - CSS トランジション + - DOM + - Event + - Reference + - TransitionEvent + - transitionstart + - イベント +translation_of: Web/API/HTMLElement/transitionstart_event +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

transitionstart イベントは、CSS トランジションが実際に開始されたとき、すなわち、{{cssxref("transition-delay")}} が終了したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能いいえ
インターフェイス{{domxref("TransitionEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}}
+ +

例

+ +

このコードでは transitionstart イベントにリスナーを追加しています:

+ +
element.addEventListener('transitionstart', () => {
+  console.log('Started transitioning');
+});
+ +

似ていますが、 addEventListener()の代わりに ontransitionstart プロパティを使っています:

+ +
element.ontransitionrun = () => {
+  console.log('Started transitioning');
+};
+ +

Live example

+ +

以下の例では、単純な {{htmlelement("div")}} 要素を用い、遅延を含むトランジションでスタイル付けしています。

+ +
<div class="transition"></div>
+<div class="message"></div>
+ +
.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 2s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}
+ +

これに、{{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "transitionrun")}} イベントが発生する場所を示す JavaScript を追加します。

+ +
const transition = document.querySelector('.transition');
+const message = document.querySelector('.message');
+
+transition.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+transition.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+transition.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+
+ +

{{ EmbedLiveSample('Examples', '100%', '150px') }}

+ +

相違点は以下のとおりです。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#transitionstart', 'transitionstart')}}{{Spec2('CSS3 Transitions')}}初回定義
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

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