diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/element | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/element')
90 files changed, 10099 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/element/accesskey/index.html b/files/zh-cn/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..9b52b463e5 --- /dev/null +++ b/files/zh-cn/web/api/element/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API接口 + - 属性 + - 需要丰富内容 +translation_of: Web/API/HTMLElement/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/element/activate_event/index.html b/files/zh-cn/web/api/element/activate_event/index.html new file mode 100644 index 0000000000..3185540e78 --- /dev/null +++ b/files/zh-cn/web/api/element/activate_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Element: DOMActivate event' +slug: Web/API/Element/Activate_event +tags: + - API + - 事件 + - 参考 +translation_of: Web/API/Element/DOMActivate_event +--- +<p>{{APIRef}}</p> + +<p>{{Deprecated_Header}}</p> + +<p>当元素被激活时发生，例如点击鼠标或键盘按键。</p> + +<p>当元素被激活，如使用鼠标点击或使用键盘导航并激活至这个元素时， <code><strong>DOMActivate</strong></code> 事件被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <p class="syntaxbox">Bubbles</p> + </th> + <td> + <p class="syntaxbox">Yes</p> + </td> + </tr> + <tr> + <th scope="row"> + <p class="syntaxbox">Cancelable</p> + </th> + <td> + <p class="syntaxbox">Yes</p> + </td> + </tr> + <tr> + <th scope="row"> + <p class="syntaxbox">Interface</p> + </th> + <td> + <p>{{domxref("MouseEvent")}}</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre><svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" + xmlns:ev="http://www.w3.org/2001/xml-events" + width="6cm" height="5cm" viewBox="0 0 600 500"> + + <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc> + + <!-- ECMAScript to change the radius --> + <script type="application/ecmascript"><![CDATA[ + function change(evt) { + var circle = evt.target; + var currentRadius = circle.getFloatTrait("r"); + if (currentRadius == 100) + circle.setFloatTrait("r", currentRadius * 2); + else + circle.setFloatTrait("r", currentRadius * 0.5); + } + ]]></script> + + <!-- Act on each DOMActivate event --> + <circle cx="300" cy="225" r="100" fill="red"> + <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); </handler> + </circle> + + <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> + Activate the circle to change its size + </text> +</svg> +</pre> + + + +<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('UI Events', '#event-type-DOMActivate', 'DOMActivate')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.DOMActivate_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> + <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> + <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/animate/index.html b/files/zh-cn/web/api/element/animate/index.html new file mode 100644 index 0000000000..aa5efc7d61 --- /dev/null +++ b/files/zh-cn/web/api/element/animate/index.html @@ -0,0 +1,205 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - js动画 + - 动画 + - 动画接口 +translation_of: Web/API/Element/animate +--- +<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div> + +<p>{{domxref("Element")}} 接口的<strong><code>animate()</code></strong> 方法是一个创建新{{domxref("Animation")}}的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 {{domxref("Animation")}} 对象实例</p> + +<div class="note"> +<p>一个元素上可以应用多个动画效果。你可以通过调用此函数获得这些动画效果的一个列表： {{domxref("Element.getAnimations()")}}.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>keyframes 关键帧</code></dt> + <dd> + <p>一个对象，代表关键帧的一个集合</p> + </dd> + <dt><code>options 可选项</code></dt> + <dd><strong>代表动画持续时间的整形数字</strong> (以毫秒为单位), 或者一个包含一个或多个时间属性的对象：</dd> + <dd> + <dl> + <dt><code>id {{optional_inline}}</code></dt> + <dd>在 <code>animate()里可作为唯一标识的属性</code>: 一个用来引用动画的字符串（ <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> ）</dd> + </dl> + {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd> +</dl> + +<h4 id="未来的可选项">未来的可选项</h4> + +<p>下面的可选项目前并非在所有地方都可用，但未来将会被加进来</p> + +<dl> + <dt><code>composite {{optional_inline}} 合成</code></dt> + <dd>决定动画彼此之间的值如何结合起来, 单独的动画不指定自己的特定复合操作。 默认为 <code>replace</code>. + <ul> + <li><code>add</code> 表示追加影响,每一次连续的迭代建立在前一个的基础上。 比如<code>transform</code>, <code>translateX(-200px)</code> 将不会覆盖 <code>rotate(20deg)</code> 的值，最终结果是 <code>translateX(-200px) rotate(20deg)</code></li> + <li><code>accumulate</code> 效果类似但是更智能一些: <code>blur(2)</code> 和<code>blur(5)</code> 的结果为<code>blur(7)</code>, 而不是 <code>blur(2) blur(5)</code></li> + <li><code>replace</code> 新的值将会覆盖掉旧的</li> + </ul> + </dd> + <dt><code>iterationComposite {{optional_inline}} 迭代合成 </code></dt> + <dd>决定动画迭代之间的值如何结合起来， 可以被设置为 <code>accumulate</code> 或者 <code>replace</code> （同上）。默认值为 <code>replace</code>.</dd> + <dt><code>spacing {{optional_inline}}</code></dt> + <dd>决定在动画持续时间内如何分配没有时间偏移的关键帧. 默认值为<code>distribute</code>. + <ul> + <li><code>distribute</code> 分配的关键帧位置，使连续关键帧之间的距离相等。也就是说，没有任何偏移时，将会使关键帧均匀分到整个运行时间内</li> + <li><code>paced</code> 分配的关键帧位置，使连续关键帧之间的距离让某个步增的属性值的增长速度相同，也就是说，属性值差异越大，关键帧之间的距离越远</li> + </ul> + + <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回 {{domxref("Animation")}}.</p> + +<h2 id="示例">示例</h2> + +<p>在示例 <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> 中, 我们用 <code>animate()</code> 来快速创建并运行使 <code>#tunnel</code> 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项</p> + +<pre class="brush: js">document.getElementById("tunnel").animate([ + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } +], { + // timing options + duration: 1000, + iterations: Infinity +}); +</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('Web Animations', '#the-animatable-interface', 'animate()' )}}</td> + <td>{{Spec2('Web Animations')}}</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatNo}}</td> + <td>23</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatNo}}</td> + <td>37</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>id</code> option</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{CompatChrome(50.0)}}</td> + <td>{{ CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="更多">更多</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("Element.getAnimations()")}}</li> + <li>{{domxref("Animation")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/assignedslot/index.html b/files/zh-cn/web/api/element/assignedslot/index.html new file mode 100644 index 0000000000..c586eeae45 --- /dev/null +++ b/files/zh-cn/web/api/element/assignedslot/index.html @@ -0,0 +1,89 @@ +--- +title: Element.assignedSlot +slug: Web/API/Element/assignedSlot +translation_of: Web/API/Slottable/assignedSlot +--- +<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> + +<p>The <strong><code>assignedSlot</code></strong> property of the {{domxref("Element")}} interface returns the {{domxref("HTMLSlotElement")}} interface associated with the element.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>htmlSlotElement</em> = <em>element</em>.assignedSlot</pre> + +<h3 id="Value">Value</h3> + +<p>An instance of {{domxref("HTMLSlotElement")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-slotable-assignedslot','assignedSlot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/element/attachshadow/index.html b/files/zh-cn/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..fa1389c4e1 --- /dev/null +++ b/files/zh-cn/web/api/element/attachshadow/index.html @@ -0,0 +1,168 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +tags: + - API + - 元素 + - 参考 + - 方法 +translation_of: Web/API/Element/attachShadow +--- +<p>{{APIRef('Shadow DOM')}}</p> + +<p><strong><code>Element.attachShadow()</code></strong> 方法给指定的元素挂载一个Shadow DOM，并且返回对 <code><a href="/zh-CN/docs/Web/API/ShadowRoot">ShadowRoot</a></code> 的引用。</p> + +<h2 id="可以被挂载的shadow_DOM元素">可以被挂载的shadow DOM元素</h2> + +<p>要注意的是，不是每一种类型的元素都可以附加到shadow root（影子根）下面。出于安全考虑，一些元素不能使用 shadow DOM（例如{{htmlelement("a")}}），以及许多其他的元素。下面是一个<strong>可以</strong>挂载 shadow root 的元素列表：</p> + +<ul> + <li>任何带有<a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">有效的名称</a>且可独立存在的（autonomous）自定义元素</li> + <li>{{htmlelement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("body")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("h1")}}</li> + <li>{{htmlelement("h2")}}</li> + <li>{{htmlelement("h3")}}</li> + <li>{{htmlelement("h4")}}</li> + <li>{{htmlelement("h5")}}</li> + <li>{{htmlelement("h6")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("p")}}</li> + <li>{{htmlelement("section")}}</li> + <li>{{htmlelement("span")}}</li> +</ul> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>shadowroot</var> = <var>element</var>.attachShadow(<var>shadowRootInit</var>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>shadowRootInit</code></dt> + <dd>一个 <code>ShadowRootInit</code> 字典，包括下列字段： + <dl> + <dt><code>mode 模式</code></dt> + <dd> + <p>指定 Shadow DOM 树<em>封装模式</em>的字符串，可以是以下值：</p> + + <ul> + <li><code>open</code> shadow root元素可以从js外部访问根节点，例如使用 {{domxref("Element.shadowRoot")}}:</li> + </ul> + + <pre>element.shadowRoot; // 返回一个ShadowRoot对象</pre> + + <ul> + <li><code>closed</code> 拒绝从js外部访问关闭的shadow root节点</li> + </ul> + + <pre>element.shadowRoot; // 返回null</pre> + </dd> + <dt><code>delegatesFocus 焦点委托</code></dt> + <dd>一个布尔值, 当设置为 <code>true</code> 时, 指定减轻自定义元素的聚焦性能问题行为.<br> + 当shadow DOM中不可聚焦的部分被点击时, 让第一个可聚焦的部分成为焦点, 并且shadow host（影子主机）将提供所有可用的 <code>:focus</code> 样式.</dd> + </dl> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回一个 {{domxref("ShadowRoot")}} 对象或者 <code>null</code>。</p> + +<h3 id="异常">异常</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">异常</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidStateError<br> + 无效状态错误</code></td> + <td>您添加的元素已经是一个shadow host（影子主机）.</td> + </tr> + <tr> + <td> + <p><code>NotSupportedError<br> + 不被支持错误</code></p> + </td> + <td>您应该添加 HTML 元素的命名空间之外的shadow root, 或者这个元素不能有其他shadow挂载到它上面 (见上).</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>下面的例子取至 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 片段( <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">现场看看</a> ). 你可以看到使用 <code>attachShadow()</code> 在代码中间创建一个shadow root, 然后我们可以将自定义元素的内容挂载添加到它上面。</p> + +<pre class="brush: js">// 为新元素创建一个类 +class WordCount extends HTMLParagraphElement { + constructor() { + // 在构造器中先调用一下 super + super(); + + // 计数器指向元素的父级 + var wcParent = this.parentNode; + + function countWords(node){ + var text = node.innerText || node.textContent + return text.trim().split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // 创建一个shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // 创建文本节点并向其添加计数器 + var text = document.createElement('span'); + text.textContent = count; + + // 将其添加到shadow root上 + shadow.appendChild(text); + + // 当元素内容发生变化时更新计数 + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200); + } +} + +// 定义新元素 +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<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('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.attachShadow")}}</p> diff --git a/files/zh-cn/web/api/element/attributes/index.html b/files/zh-cn/web/api/element/attributes/index.html new file mode 100644 index 0000000000..f720ddae44 --- /dev/null +++ b/files/zh-cn/web/api/element/attributes/index.html @@ -0,0 +1,127 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - DOM + - Element + - Property + - Reference + - 元素 + - 参考 + - 属性 +translation_of: Web/API/Element/attributes +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Element.attributes</code></strong> 属性返回该元素所有属性节点的一个实时集合。该集合是一个 {{domxref("NamedNodeMap")}} 对象，不是一个数组，所以它没有 {{jsxref("Array", "数组")}} 的方法，其包含的 {{domxref("Attr", "属性")}} 节点的索引顺序随浏览器不同而不同。更确切地说，<code style="font-style: normal;">attributes</code> 是字符串形式的名/值对，每一对名/值对对应一个属性节点。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;</pre> + +<h2 id="示例">示例</h2> + +<h3 id="基本示例">基本示例</h3> + +<pre class="brush: js">// 获取文档中的第一个 <p> 元素 +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes; +</pre> + +<h3 id="遍历元素的属性">遍历元素的属性</h3> + +<p>索引有利于遍历一个元素的所有属性。</p> + +<p>在以下例子中会遍历文档中 id 为 "paragraph" 的元素的属性节点，并打印出来。</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <head> + <title>Attributes example</title> + <script type="text/javascript"> + function listAttributes() { + var paragraph= document.getElementById("paragraph"); + var result= document.getElementById("result"); + + // First, let's verify that the paragraph has some attributes + if (paragraph.hasAttributes()) { + var attrs = paragraph.attributes; + var output= ""; + for(var i=attrs.length-1; i>=0; i--) { + output+= attrs[i].name + "->" + attrs[i].value; + } + result.value = output; + } else { + result.value = "没有属性可显示" + } + } + </script> + </head> + +<body> + <p id="paragraph" style="color: green;">Sample Paragraph</p> + <form action=""> + <p> + <input type="button" value="显示属性及其值" + onclick="listAttributes();"> + <input id="result" type="text" value=""> + </p> + </form> +</body> +</html></pre> + +<p>{{ EmbedLiveSample('遍历元素的属性') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Element.attributes")}}</p> + +<p>在 Firefox 22 版本之前，这个属性是被用在 {{domxref("Node")}} 上（继承至 {{domxref("Element")}}）。它需要被使用在其他符合这个接口规范的浏览器上使用。</p> + +<p>IE5.5 返回的是一个 map 形式的键值对而不是一个 attribute 的属性对象。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("NamedNodeMap")}}，返回对象的接口</li> + <li>跨浏览器兼容性问题可参考： <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/classlist/index.html b/files/zh-cn/web/api/element/classlist/index.html new file mode 100644 index 0000000000..f7a905889b --- /dev/null +++ b/files/zh-cn/web/api/element/classlist/index.html @@ -0,0 +1,293 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - 元素 + - 参考 + - 只读属性 + - 属性 +translation_of: Web/API/Element/classList +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.classList</strong></code> 是一个只读属性，返回一个元素的类属性的实时 {{domxref("DOMTokenList")}} 集合。</p> + +<p>相比将 {{domxref("element.className")}} 作为以空格分隔的字符串来使用，<code>classList</code> 是一种更方便的访问元素的类列表的方法。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">const <var>elementClasses</var> = <var>elementNodeReference</var>.classList; +</pre> + +<h3 id="返回值">返回值</h3> + +<p><code><em><var>elementClasses</var></em></code> 是一个 {{domxref("DOMTokenList")}} 表示 <code><var>elementNodeReference</var></code> 的类属性 。如果类属性未设置或为空，那么 <code><em>elementClasses.length</em></code> 返回 <code>0</code>。虽然 <code>element.classList</code> 本身是只读的，但是你可以使用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add">add()</a></code> 和 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove">remove()</a></code> 方法修改它。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">const div = document.createElement('div'); +div.className = 'foo'; + +// 初始状态：<div class="foo"></div> +console.log(div.outerHTML); + +// 使用 classList API 移除、添加类值 +div.classList.remove("foo"); +div.classList.add("anotherclass"); + +// <div class="anotherclass"></div> +console.log(div.outerHTML); + +// 如果 visible 类值已存在，则移除它，否则添加它 +div.classList.toggle("visible"); + +// add/remove visible, depending on test conditional, i less than 10 +div.classList.toggle("visible", i < 10 ); + +console.log(div.classList.contains("foo")); + +// 添加或移除多个类值 +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); + +// 使用展开语法添加或移除多个类值 +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); + +// 将类值 "foo" 替换成 "bar" +div.classList.replace("foo", "bar");</pre> + +<div class="note"> +<p>Firefox 26 以下的版本并未实现 <code>add</code>/<code>remove</code>/<code>toggle</code> 方法中的所有参数。参见 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<p>由于<code>Element.prototype.className</code>属性在指定事件被更改后会触发该事件，因此旧的<code>onpropertychange</code>事件可用于创建活动的类列表模型。以下针对<code>classList</code>和多令牌列表的聚合列表确保了IE10-IE11浏览器的所有标准方法和属性的完全覆盖以及IE 6-9向其“疯狂靠近”——这可真是值得吃惊的。看看吧:</p> + +<pre class="brush: js notranslate">// 1. String.prototype.trim polyfill +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +(function(window){"use strict"; // prevent global namespace pollution +if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; +var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { + if (V === "") throw new DOMException( + "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." ); + if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " + + "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens."); +} +// 2. Implement the barebones DOMTokenList livelyness polyfill +if (typeof DOMTokenList !== "function") (function(window){ + var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty; + var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0; + function DOMTokenList(){ + if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through + } + DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value}; + DOMTokenList.prototype.add = function(){ + a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("add", val); + for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i) + if (this[i] === val) continue a; else resStr += " " + this[i]; + this[Len] = val, proto.length += 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + DOMTokenList.prototype.remove = function(){ + for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) { + val = arguments[v] + "", checkIfValidClassListEntry("remove", val); + for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i) + if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } } + if (!is) continue; + delete this[Len], proto.length -= 1, proto.value = resStr; + } + skipPropChange = 1, ele.className = proto.value, skipPropChange = 0; + }; + window.DOMTokenList = DOMTokenList; + function whenPropChanges(){ + var evt = window.event, prop = evt.propertyName; + if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) { + var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop]; + var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"]; + var oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;} + resTokenList[cI-sub] = tokens[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + if(prop !== "classList") return; + skipPropChange = 1, target.classList = resTokenList, target.className = strval; + skipPropChange = 0, resTokenList.length = tokens.length - sub; + } + } + function polyfillClassList(ele){ + if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation"); + ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop + allowTokenListConstruction = 1; + try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); } + finally { allowTokenListConstruction = 0 } + var protoObjProto = protoObj.prototype, resTokenList = new protoObj(); + a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){ + for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; } + this[cI-sub] = toks[cI]; + } + protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele; + if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM + enumerable: 1, get: function(){return resTokenList}, + configurable: 0, set: function(newVal){ + skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0; + var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length; + a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){ + for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;} + resTokenList[cI-sub] = toks[cI]; + } + for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs + } + }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype + enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype + }); defineProperty(protoObjProto, " uCL", { + enumerable: 0, configurable: 0, writeable: 0, value: ele + }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; } + ele.attachEvent( "onpropertychange", whenPropChanges ); + } + try { // Much faster & cleaner version for IE8 & IE9: + // Should work in IE8 because Element.prototype instanceof Node is true according to the specs + window.Object.defineProperty(window.Element.prototype, "classList", { + enumerable: 1, get: function(val){ + if (!hasOwnProp.call(this, "classList")) polyfillClassList(this); + return this.classList; + }, + configurable: 0, set: function(val){this.className = val} + }); + } catch(e) { // Less performant fallback for older browsers (IE 6-8): + window[" uCL"] = polyfillClassList; + // the below code ensures polyfillClassList is applied to all current and future elements in the doc. + document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=( + '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + // IE6 + '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8 + ); + } +})(window); +// 3. Patch in unsupported methods in DOMTokenList +(function(DOMTokenListProto, testClass){ + if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){ + function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]); + }; + if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){ + if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]); + var oldValue = this.value; + return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/); + }; + if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean") + DOMTokenListProto.replace = function(oldToken, newToken){ + checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken); + var oldValue = this.value; + return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true)); + }; + if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){ + for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true; + return false; + }; + if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){ + if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this); + else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this); + }; + if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true}; + }}; + }; + if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){ + var nextIndex = 0, that = this; + return {next: function() { + return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true}; + }}; + }; +})(window.DOMTokenList.prototype, window.document.createElement("div").classList); +})(window); +</pre> + + + +<p>---------------------------------</p> + + + +<p>这里有一个关于classList的“妙用”，我觉得很有必要给你分享一下：</p> + +<p>我们都知道，通过JS去操控CSS确实是一件很麻烦的事情——他可能导致回流和重绘。</p> + +<p>一般我们会这样做：</p> + +<p><code>document.style.background="red";</code></p> + +<p><code>document.style.fontSize="24";</code></p> + +<p>这样的话相当于【元素的样式被改变了两次】！整个JavaScript的性能就下来了。必要的时候（对一个元素更改多个样式）我们可以“把他们合在一起”：</p> + +<p><code>document.style.cssText="background:red;font-size:24;";</code></p> + +<p>这一个“列表”形式也可以体现classList叫法的来源。</p> + +<p>——它确实是一个list列表的形式：</p> + +<p>document.getElementById("myDIV").classList.add("mystyle");</p> + +<p>document.getElementById("myDIV").classList.remove("mystyle"[,"mystyle2",...]);</p> + +<p>document.getElementById("myDIV").classList.item("mystyle");</p> + + + +<h3 id="警告">警告</h3> + +<p>polyfill的功能有限。它目前无法在IE6-7中使用和获取“游离于文档外的”元素(例如：由<code>document.createElement</code>创建的元素，在它们被附加到父节点之前)。</p> + +<p>然而，它应该在IE9中运行良好。<code>classList</code>的多适应性版本和W3规范之间的一个主要差异是：对于IE6-8，没有办法创建一个不可变的对象(其属性不能被直接修改的对象)。然而，在IE9中，可以通过扩展原型、冻结可见对象和覆盖本地属性方法来实现。虽然这样的动作在IE6-IE8中不起作用，即使在IE9中，这样做也会使整个网页的性能慢得像蜗牛爬行一样，使得这些修改对于这个聚合函数来说完全不切实际。 需要注意的是，在IE6-7中，这个polyfill使用window对象上的window[" uCL"]属性与CSS表达式进行通信，使用x-uCLp css属性对所有元素进行通信，使用元素[" uCL"]属性对所有元素进行通信，以允许垃圾收集并提高性能。在所有多填充浏览器(IE6-9)中，一个额外的元素[" uCLp"]属性被添加到元素以确保符合标准原型，并且一个DOMTokenList[" uCL"]属性被添加到每个元素["classList"]对象以确保DOMTokenList被绑定到它自己的元素。</p> + +<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("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想对数据有所贡献，请查看<a href="/zh-CN/docs/">https://github.com/mdn/browser-compat-data</a>并向我们发送请求。</div> + +<p>{{Compat("api.Element.classList")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/classname/index.html b/files/zh-cn/web/api/element/classname/index.html new file mode 100644 index 0000000000..0b071645e3 --- /dev/null +++ b/files/zh-cn/web/api/element/classname/index.html @@ -0,0 +1,126 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - Element.className +translation_of: Web/API/Element/className +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong>className</strong> 获取或设置指定元素的class属性的值。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>let cName</var> = <var>elementNodeReference</var>.className; + +<var>elementNodeReference</var>.className = <var>cName</var>;</pre> + +<ul> + <li><var>cName</var>是一个字符串变量,表示当前元素的<code>class</code>属性的值,可以是由空格分隔的多个<code>class</code>属性值.</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">let elm = document.getElementById("div1"); + +if (elm.className == "fixed") { + // 跳过class属性为特定值的元素 + goNextElement(); +}</pre> + +<h2 id="Notes" name="Notes">注释</h2> + +<div class="note"> +<p>使用名称<code>className</code>而不是<code>class</code>作为属性名,是因为"class" 在JavaScript中是个保留字.</p> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("element.classList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/click_event/index.html b/files/zh-cn/web/api/element/click_event/index.html new file mode 100644 index 0000000000..f628e9e6cc --- /dev/null +++ b/files/zh-cn/web/api/element/click_event/index.html @@ -0,0 +1,269 @@ +--- +title: click +slug: Web/API/Element/click_event +translation_of: Web/API/Element/click_event +--- +<p>当定点设备的按钮（通常是鼠标左键）在一个元素上被按下和放开时，<code>click</code>事件就会被触发。</p> + +<h2 id="一般信息">一般信息</h2> + +<dl> + <dt>规范</dt> + <dd><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></dd> + <dt>接口</dt> + <dd>{{domxref("MouseEvent")}}</dd> + <dt>是否冒泡</dt> + <dd>Yes</dd> + <dt>是否可取消</dt> + <dd>Yes</dd> + <dt>对象</dt> + <dd>Element</dd> + <dt>默认动作</dt> + <dd>无定型</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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>事件对象 (位于DOM树最上面的元素).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>是否可被取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (该文档的<code>window</code> 对象)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>在短时间内发生的连续点击次数的计数。</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>被事件监听触发的节点.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>对于 <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> 和<code>mouseleave</code> 事件: 值为与其互补的事件(比如<code>mouseenter</code> 就为<code>mouseleave</code>). 否则为<code>null</code>.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的屏幕x轴坐标.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的屏幕y轴坐标.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的浏览器窗口的x轴坐标.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的浏览器窗口的y轴坐标.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>点击时按下的鼠标按钮: 左键=0, 中间按钮=1 (如果实现的话), 右键=2. 对于配置为左手使用按钮的操作被反转的鼠标，这些值从右向左读取。</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>当鼠标事件被触发时按钮的buttons: 左键=1, 右键=2, 中间按钮=4, 第四个按钮(通常是"返回")=8,第五个按钮(通常是"前进")=16.若有两个或以上的按钮按下,返回以逻辑或运算形成的合并值.例如左键右键同时按下就返回 3 (=1 | 2). <a href="/zh-CN/docs/Web/API/MouseEvent">更多信息</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>压力应用于接触或tabdevice时生成的事件的数量；该值介于0（最小压力）和1（最大压力）。</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时ctrl按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时shift按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时alt按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时meta按键被按下时为true，否则为false。</td> + </tr> + </tbody> +</table> + +<h2 id="样例">样例</h2> + +<pre><div id="test"></div> + +<script> + document.getElementById("test").addEventListener("click", function( event ) { + // 在被点击的div内显示当前被点击次数 + event.target.textContent = "click count: " + event.detail; + }, false); +</script> +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<p>Internet Explorer 8 & 9存在一个漏洞，具有经{{cssxref("background-color")}}样式计算为<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a>的元素覆盖在其它元素顶端时，不会收到<code>click</code>事件。取而代之，所有<code>click</code>事件将被触发于其底下的元素。参见<a href="http://jsfiddle.net/YUKma/show/">this live example</a>样例。</p> + +<p>已知会触发此漏洞的情景：</p> + +<ul> + <li>仅对于IE9： + <ul> + <li>设置<code>{{cssxref("background-color")}}: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li> + <li>设置<code>{{cssxref("opacity")}}: 0</code> 并且明确指定{{cssxref("background-color")}}而不是<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> + </ul> + </li> + <li>对于IE8和IE9：设置<code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code>并且明确指定{{cssxref("background-color")}}而不是<a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li> +</ul> + +<h3 id="Safari手机版">Safari手机版</h3> + +<p>safari手机版会有一个bug，当点击事件不是绑定在交互式的元素上（比如说HTML的div），并且也没有直接的事件监听器绑定在他们自身。可以戳 <a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">链接</a> 查看演示。也可以看 <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari 的可点击元素</a> 和 <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">点击元素的定义</a>.</p> + +<p>解决方法如下：</p> + +<ul> + <li>为其元素或者祖先元素，添加cursor: pointer的样式，使元素具有交互式点击</li> + <li>为需要交互式点击的元素添加<code>onclick="void(0)"的属性，但并不包括body元素</code></li> + <li><code>使用可点击元素如<a>,代替不可交互式元素如div</code></li> + <li>不使用click的事件委托。</li> +</ul> + +<p>Safari 手机版里，以下元素不会受到上述bug的影响：</p> + +<ul> + <li><a> 需要href链接</li> + <li><area> 需要href</li> + <li><button></li> + <li><img></li> + <li><input></li> + <li><label> 需要与form控制器连接</li> + <li>这份清单并不完整，你可以帮助MDN做扩展</li> +</ul> + +<p>{{CompatibilityTable}}</p> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1]只在{{HTMLElement("textarea")}} 以及某些{{HTMLElement("input")}} 元素上有效.</p> + +<p>[2] Internet Explorer 只在{{HTMLElement("input")}}的<code>checkbox</code>或<code>radio</code>元素双击时才会引发<code>click</code>事件.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/clientheight/index.html b/files/zh-cn/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..b9cb7499ef --- /dev/null +++ b/files/zh-cn/web/api/element/clientheight/index.html @@ -0,0 +1,62 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - Property +translation_of: Web/API/Element/clientHeight +--- +<p>{{ APIRef() }}</p> + +<p>这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。</p> + +<p><code>clientHeight</code> 可以通过 CSS <code>height</code> + CSS <code>padding</code> - 水平滚动条高度 (如果存在)来计算.</p> + +<div class="note"> +<p><strong>备注:</strong> 此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 {{ domxref("element.getBoundingClientRect()") }}.</p> + +<p>备注：上面的有问题 因为使用element.getBoundingClientRect()只能获取元素的width / height，但是这个值是 offsetWidth / offsetHeight ，包括边框的长度，所以不能获取clientWidth / clientHeight</p> +</div> + +<h2 id=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC" name=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC">语法</h2> + +<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight; +</pre> + +<p>返回整数 <code><var>h</var></code>，表示 <code><var>element</var></code> 的 <code>clientHeight</code>（单位像素）。</p> + +<p><code>clientHeight</code> 是只读的.</p> + +<h2 id=".E8.8C.83.E4.BE.8B" name=".E8.8C.83.E4.BE.8B">示例</h2> + +<p><img alt="Image:Dimensions-client.png" src="https://developer.mozilla.org/@api/deki/files/185/=Dimensions-client.png"></p> + +<h2 id=".E8.A7.84.E8.8C.83" name=".E8.A7.84.E8.8C.83">规范</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('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h3> + +<p>clientHeight是在IE浏览器对象模型中引入的属性。</p> + +<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83">相关链接</h3> + +<ul> + <li>{{domxref("HTMLElement.offsetHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/clientleft/index.html b/files/zh-cn/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..67a80d9d1f --- /dev/null +++ b/files/zh-cn/web/api/element/clientleft/index.html @@ -0,0 +1,62 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +--- +<p>{{ Fx_minversion_header(3) }} {{ APIRef() }}</p> + +<p>表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。<code>clientLeft</code> 不包括左外边距和左内边距。<code>clientLeft</code> 是只读的。</p> + +<p>从 <a href="zh-CN/Gecko">Gecko</a> 1.9（<a href="zh-CN/Firefox_3">Firefox 3</a> {{ Bug(111207) }}）开始，基于 Gecko 的应用支持 <code>clientLeft</code> 属性。该属性在 Firefox 2 及更早的版本中不被支持。</p> + +<p>当 <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side </em> preference</a> （译注：这个属性好像是只在火狐浏览器中才有）被设为 1 或 3，且文本方向被设为从右到左（RTL），则垂直滚动条位于左边，这会影响到 <code>clientLeft</code> 属性值的计算。</p> + +<h2 id="语法">语法</h2> + +<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft; +</pre> + +<h2 id="示例">示例 </h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.clientLeft")}}</p> + +<h2 id="备注">备注</h2> + +<p><code>clientLeft</code> 首次出现于 MS IE DHTML 对象模型中。</p> + +<p>元素的文本方向被设为从右到左后，其垂直滚动条的位置取决于 <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side </em> preference</a></p> + +<p>当元素设置 <code>display: inline</code> 后，无论是否有边框，<code>clientLeft</code> 始终返回 <code>0</code> 。</p> diff --git a/files/zh-cn/web/api/element/clienttop/index.html b/files/zh-cn/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..24ae493df0 --- /dev/null +++ b/files/zh-cn/web/api/element/clienttop/index.html @@ -0,0 +1,44 @@ +--- +title: Element.clientTop +slug: Web/API/Element/clientTop +tags: + - API + - CSSOM View + - 属性 +translation_of: Web/API/Element/clientTop +--- +<p>{{ APIRef("DOM") }}</p> + +<p>一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。<code>clientTop</code> 是只读的。</p> + +<p>基于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/en/Gecko">Gecko</a> 的应用从 Gecko 1.9（<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/en/Firefox_3">Firefox 3</a> {{ Bug(111207) }}）开始支持 clientTop。该属性在 Firefox 2 或更早的版本中不被支持。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var top = element.clientTop;</pre> + +<h2 id="示例">示例</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; padding-right: 28px; padding-left: 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;"> +<p id="PaddingTopLabel" style="margin-bottom: 0px; text-align: center; font-style: italic; font-weight: bold;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external external-icon" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="margin-bottom: 0px; text-align: center; font-style: italic; font-weight: bold;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em></div> + +<h2 id="Notes" name="Notes" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">备注</h2> + +<p><code>clientTop</code> 首次出现于 MS IE DHTML 对象模型中。</p> + +<h2 id="References" name="References" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/clientwidth/index.html b/files/zh-cn/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..562a9e1ad5 --- /dev/null +++ b/files/zh-cn/web/api/element/clientwidth/index.html @@ -0,0 +1,66 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - 参考 + - 属性 +translation_of: Web/API/Element/clientWidth +--- +<div>{{APIRef("DOM")}}</div> + +<p>内联元素以及没有 CSS 样式的元素的 <code><strong>clientWidth</strong></code> 属性值为 0。<code><strong>Element.clientWidth</strong></code> 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。</p> + +<p>当在根元素(<html>元素)上使用clientWidth时(或者在<body>上，如果文档是在quirks(怪异)模式下)，将返回viewport的宽度(不包括任何滚动条). <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">This is a special case of <code>clientWidth</code></a>.</p> + +<div class="note"> +<p>该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 {{ domxref("element.getBoundingClientRect()") }}。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth; +</pre> + +<p><code><var>intElemClientWidth</var></code> 是一个整数，表示元素的 <code>clientWidth</code>。<code>clientWidth</code> 是一个只读属性。</p> + +<h2 id="示例">示例</h2> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="备注">备注</h3> + +<p><code>clientWidth</code> 首次出现于微软 IE 早期的 DHTML 对象模型中。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.clientWidth")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> + <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/closest/index.html b/files/zh-cn/web/api/element/closest/index.html new file mode 100644 index 0000000000..8e89eb8534 --- /dev/null +++ b/files/zh-cn/web/api/element/closest/index.html @@ -0,0 +1,142 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +<div> +<p>{{APIRef('Shadow DOM')}}</p> +</div> + +<p><code><strong>Element.closest()</strong></code> 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 <code>null</code>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <var>closestElement</var><em> = </em><var>targetElement</var>.closest(<em>selectors</em>); +</pre> + +<h3 id="参数">参数</h3> + +<ul> + <li><em>selectors</em> 是指定的选择器，比如 <code>"p:hover, .toto + q"</code>。</li> +</ul> + +<h3 id="返回值">返回值</h3> + +<ul> + <li><em>elt</em> 是查询到的祖先元素，也可能是 <code>null</code>。</li> +</ul> + +<h3 id="异常">异常</h3> + +<ul> + <li>如果传入的选择器不合法，则抛出 {{exception("SyntaxError")}} 异常。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <div id="div-01">Here is div-01 + <div id="div-02">Here is div-02 + <div id="div-03">Here is div-03</div> + </div> + </div> +</article></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var el = document.getElementById('div-03'); + +var r1 = el.closest("#div-02"); +// 返回 id 为 div-02 的那个元素 + +var r2 = el.closest("div div"); +// 返回最近的拥有 div 祖先元素的 div 祖先元素，这里的话就是 div-03 元素本身 + +var r3 = el.closest("article > div"); +// 返回最近的拥有父元素 article 的 div 祖先元素，这里的话就是 div-01 + +var r4 = el.closest(":not(div)"); +// 返回最近的非 div 的祖先元素，这里的话就是最外层的 article</pre> + +<h2 id="Polyfill" name="Polyfill">兼容</h2> + +<p>部分浏览器并不支持<code>Element.closest()</code>，但却支持了<code>element.matches()</code>（或拥有私有前缀，如IE9+），一个polyfill案例：</p> + +<pre class="brush: js">if (!Element.prototype.matches) + Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; + +if (!Element.prototype.closest) + Element.prototype.closest = function(s) { + var el = this; + if (!document.documentElement.contains(el)) return null; + do { + if (el.matches(s)) return el; + el = el.parentElement; + } while (el !== null); + return null; + };</pre> + +<p>然而，如果你需要兼容到IE8，那么随后这个polyfill将会非常缓慢地运行到结束。并且，IE8只支持CSS2.1的选择器，并且使网页运行非常缓慢。</p> + +<pre class="brush: js">if (window.Element && !Element.prototype.closest) { + Element.prototype.closest = + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i, + el = this; + do { + i = matches.length; + while (--i >= 0 && matches.item(i) !== el) {}; + } while ((i < 0) && (el = el.parentElement)); + return el; + }; +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("api.Element.closest")}}</p> + +<h3 id="兼容性说明">兼容性说明</h3> + +<ul> + <li>当在 Edge 15-18 里使用 <code>document.createElement(tagName).closest(tagName)</code> ，如果元素不是第一个（直接地或间接地）连接到上下文对象的话将会返回 <code>null</code> ，例如在一般情况下 DOM 中的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.">Document</a></code> 对象。</li> +</ul> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element")}} 接口.</li> + <li> + <div class="syntaxbox"><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors">选择器语法</a></div> + </li> + <li> + <div class="syntaxbox">其他相关选择器方法: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/contextmenu_event/index.html b/files/zh-cn/web/api/element/contextmenu_event/index.html new file mode 100644 index 0000000000..37f3cadd36 --- /dev/null +++ b/files/zh-cn/web/api/element/contextmenu_event/index.html @@ -0,0 +1,101 @@ +--- +title: 'Element: contextmenu event' +slug: Web/API/Element/contextmenu_event +tags: + - API + - DOM + - 上下文 + - 上下文菜单 + - 事件 + - 元素 + - 右击 + - 右键单击 + - 按钮 + - 菜单 + - 鼠标 +translation_of: Web/API/Element/contextmenu_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>contextmenu</code></strong> 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发，如果使用菜单键，该上下文菜单会被展示 到所聚焦元素的左下角，但是如果该元素是一棵DOM树的话，上下文菜单便会展示在当前这一行的左下角。</span></p> + +<p>任何没有被禁用的鼠标右击事件 (通过调用事件的 {{domxref("Event.preventDefault", "preventDefault()")}} 方法) 将会使得 <code>contextmenu</code> 事件在目标元素上被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles（冒泡）</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable（可撤销）</th> + <td>Yes</td> + </tr> + <tr> + <th>Interface（接口）</th> + <td>{{DOMxRef("MouseEvent")}}</td> + </tr> + <tr> + <th>Event handler property（事件处理器）</th> + <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td> + </tr> + </tbody> +</table> + +<h2 id="实例">实例</h2> + +<p>在下面的例子中，第一段内容被触发的 <code>contextmenu</code> 事件的默认行为被 <code>preventDefault()</code> 取消了，因此，在第一段右击鼠标时什么也不会发生，但是右键单击第二段内容时，则会出现标准的菜单内容，与平时右击普通页面出现的菜单内容一致。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="noContextMenu">这个段落右键菜单已被禁用。</p> +<p>但是这个段落没有被禁用。</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">noContext = document.getElementById('noContextMenu'); + +noContext.addEventListener('contextmenu', e => { + e.preventDefault(); +}); +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples")}}</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', 'indices.html#event-contextmenu', 'contextmenu')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.contextmenu_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{event("auxclick")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("pointerdown")}}</li> + <li>{{event("pointerup")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/createshadowroot/index.html b/files/zh-cn/web/api/element/createshadowroot/index.html new file mode 100644 index 0000000000..dde57148ca --- /dev/null +++ b/files/zh-cn/web/api/element/createshadowroot/index.html @@ -0,0 +1,31 @@ +--- +title: Element.createShadowRoot() +slug: Web/API/Element/createShadowRoot +translation_of: Web/API/Element/createShadowRoot +--- +<p>使用<code>Element.createShadowRoot</code> 创建的实例 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">阴影DOM</a>。创建shadow DOM时，它始终附加到现有元素。创建shadow DOM之后，它所附加的元素称为{{glossary("shadow root")}}。</p> + +<div class="note"> +<p>不推荐使用此方法，而使用{{DOMxRef("Element.attachShadow()","attachShadow()")}}。</p> +</div> + +<h2 id="Syntax" name="Syntax">句法</h2> + +<pre class="syntaxbox">var <em>shadowroot = </em><em>element</em>.createShadowRoot(); +</pre> + +<h3 id="参数">参数</h3> + +<p>没有参数。</p> + +<h3 id="结果值">结果值</h3> + +<p>返回{{DOMxRef("ShadowRoot")}}。</p> + +<h2 id="产品规格">产品规格</h2> + +<p>任何规格都不再定义此功能。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送拉取请求。</div> diff --git a/files/zh-cn/web/api/element/currentstyle/index.html b/files/zh-cn/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..de73f3c504 --- /dev/null +++ b/files/zh-cn/web/api/element/currentstyle/index.html @@ -0,0 +1,76 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +translation_of: Web/API/Element/currentStyle +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="概述">概述</h2> + +<p><strong><code>Element.currentStyle</code></strong> 是一个与 {{domxref("window.getComputedStyle")}}方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.</p> + +<h2 id="规范">规范</h2> + +<p>没有相关规范。</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">在MSDN中对该属性进行了描述</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</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>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element.runtimeStyle")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/dblclick_event/index.html b/files/zh-cn/web/api/element/dblclick_event/index.html new file mode 100644 index 0000000000..b3244d8f64 --- /dev/null +++ b/files/zh-cn/web/api/element/dblclick_event/index.html @@ -0,0 +1,223 @@ +--- +title: dblclick +slug: Web/API/Element/dblclick_event +tags: + - dbclick +translation_of: Web/API/Element/dblclick_event +--- +<p>在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时, 将触发 <code>dblclick</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/DOM-Level-3-Events/#event-type-dbclick">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</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;">元素（Element）</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">多种：开始 drag/drop 操作；开始文本选择、开始滚动或移动操作（若支持该操作时，可与鼠标中键协同） </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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>事件对象 (位于DOM树最上面的元素).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>是否可被取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (该文档的<code>window</code> 对象)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>在短时间内发生的连续点击次数的计数。</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>被事件监听触发的节点.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>对于 <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> 和<code>mouseleave</code> 事件: 值为与其互补的事件(比如<code>mouseenter</code> 就为<code>mouseleave</code>). 否则为<code>null</code>.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的屏幕x轴坐标.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的屏幕y轴坐标.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的浏览器窗口的x轴坐标.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>点击事件发生时鼠标对应的浏览器窗口的y轴坐标.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>点击时按下的鼠标按钮: 左键=0, 中间按钮=1 (如果实现的话), 右键=2. 对于配置为左手使用按钮的操作被反转的鼠标，这些值从右向左读取。</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>当鼠标事件被触发时按钮的buttons: 左键=1, 右键=2, 中间按钮=4, 第四个按钮(通常是"返回")=8,第五个按钮(通常是"前进")=16.若有两个或以上的按钮按下,返回以逻辑或运算形成的合并值.例如左键右键同时按下就返回 3 (=1 | 2). <a href="/zh-CN/docs/Web/API/MouseEvent">更多信息</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>压力应用于接触或tabdevice时生成的事件的数量；该值介于0（最小压力）和1（最大压力）。</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时ctrl按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时shift按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时alt按键被按下时为true，否则为false。</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件被触发时meta按键被按下时为true，否则为false。</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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]只在{{HTMLElement("textarea")}} 以及某些{{HTMLElement("input")}} 元素上有效.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/dommousescroll_event/index.html b/files/zh-cn/web/api/element/dommousescroll_event/index.html new file mode 100644 index 0000000000..a68a7be558 --- /dev/null +++ b/files/zh-cn/web/api/element/dommousescroll_event/index.html @@ -0,0 +1,104 @@ +--- +title: DOMMouseScroll +slug: Web/API/Element/DOMMouseScroll_event +translation_of: Web/API/Element/DOMMouseScroll_event +--- +<p>{{ Non-standard_header() }}</p> + +<p>The DOM <code>DOMMouseScroll</code> event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount becomes over 1 line or 1 page since last event. It's represented by the {{ domxref("MouseScrollEvent") }} interface.</p> + +<p>If you want to prevent the default action of mouse wheel events, it's not enough to handle only this event on Gecko because If scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event.<br> + <br> + On Gecko 17 (Firefox 17) or later, you need to call <code>preventDefault()</code> of <code>wheel</code> events which must be fired for every native event.<br> + <br> + On Gecko 16 or earlier, you need to call <code>preventDefault()</code> of <code>MozMousePixelScroll</code> event which must be fired for every native event.</p> + +<p>Use standardized wheel event if available.</p> + +<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Interface :</dfn>{{ domxref('MouseScrollEvent') }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Synchronicity :</dfn>asynchronous</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Bubbles :</dfn> yes</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Cancelable :</dfn> yes</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Default action :</dfn> Scroll, moving history, or zooming in/out</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<p>The event has only one additional property beyond standard events.</p> + +<h3 id="detail">detail</h3> + +<p>The <code>detail</code> property describes the scroll more precisely, with positive values indicating scrolling downward and negative values indicating scrolling upward.</p> + +<p>If the event represents scrolling up by a page, the value of <code>detail</code> is -32768. If the event indictes scrolling down by a page, the value is +32768. Any other value represents the number of lines to scroll, with the direction indicated by the value's sign.</p> + +<div class="note"> +<p><strong>Note:</strong> Trusted events are never sent with a value of 0 for <code>detail</code>.</p> +</div> + +<p>Trusted events are never fired with 0.</p> + +<div class="note"> +<p><strong>Note</strong><strong>:</strong> If the platform's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is computed using the line height of the nearest scrollable ancestor element of the event's target. If that element's font size is smaller than {{pref("mousewheel.min_line_scroll_amount")}}, that preference's value is used as the line height.</p> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("MouseScrollEvent") }}</li> + <li>Gecko's legacy pixel scroll event: <code>MozMousePixelScroll</code></li> + <li>Non-Gecko browsers' legacy mouse wheel event: <code>mousewheel</code></li> + <li>Standardized wheel event: <code>wheel</code></li> +</ul> diff --git a/files/zh-cn/web/api/element/getattribute/index.html b/files/zh-cn/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..2310d18095 --- /dev/null +++ b/files/zh-cn/web/api/element/getattribute/index.html @@ -0,0 +1,74 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - Element.getAttribute() +translation_of: Web/API/Element/getAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><span><strong><code>getAttribute()</code></strong> 返回元素上</span>一个指定的属性<span>值。</span>如果指定的属性不存在，则返回 <code>null</code> 或 <code>""</code> （空字符串）；具体细节, 请参阅 {{Anch("Notes")}} 部分。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>let attribute</em> = element.getAttribute(<em>attributeName</em>); +</pre> + +<p>上面：</p> + +<ul> + <li><code><em>attribute</em></code> 是一个包含 <code><em>attributeName</em></code> 属性值的字符串。</li> + <li><code><em>attributeName</em></code> 是你想要获取的属性值的属性名称。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">let div1 = document.getElementById("div1"); +let align = div1.getAttribute("align"); + +alert(align); +// shows the value of align for the element with id="div1"</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，<code>getAttribute()</code> 会先将其参数转换为小写形式。</p> + +<p>当指定的属性不存在于元素上时，所有浏览器（Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等）都返回 <code>null</code>，这也是<a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">当前 DOM 规范草案</a>规定的。然而，旧的DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串，一些 DOM 实现环境实现了该行为（behavior）。在 XUL (Gecko) 中，getAttribute 的实现遵从 DOM 3 Core specification，返回一个空字符串。因此，如果一个属性可能不存在于指定的元素上，在调用 <code>getAttribute()</code> 之前，你应该使用 {{domxref("element.hasAttribute()")}} 来检测该属性是否存在。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>29</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + </tr> + </tbody> +</table> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/getattributenames/index.html b/files/zh-cn/web/api/element/getattributenames/index.html new file mode 100644 index 0000000000..d16ebf2b36 --- /dev/null +++ b/files/zh-cn/web/api/element/getattributenames/index.html @@ -0,0 +1,98 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - getAttributeNames +translation_of: Web/API/Element/getAttributeNames +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><code>Element.getAttributeNames()</code> 返回一个</span>{{jsxref("Array")}}<span class="seoSummary">，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。</span></p> + +<p>将 <code>getAttributeNames()</code> 与 {{domxref("Element.getAttribute","getAttribute()")}} 组合使用， 是一种有效替代 {{domxref("Element.attributes")}} 的使用方法.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames(); +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">// 遍历elements的元素 +for(let name of element.getAttributeNames()) +{ + let value = element.getAttribute(name); + console.log(name, value); +} +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatChrome(61)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(48)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(61)}}</td> + <td>{{CompatChrome(61)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(48)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/element/getattributenode/index.html b/files/zh-cn/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..47d7e5c206 --- /dev/null +++ b/files/zh-cn/web/api/element/getattributenode/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttributeNode() +slug: Web/API/Element/getAttributeNode +tags: + - API + - DOM +translation_of: Web/API/Element/getAttributeNode +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="概要">概要</h2> + +<p>返回指定元素的指定属性节点</p> + +<h2 id="语法">语法</h2> + +<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>); +</pre> + +<ul> + <li><code>attrNode</code> 获得的属性返回值，是Attr 节点， nodeType 为 2</li> + <li><code>attrName</code> 是一个包含属性名称的 字符串</li> +</ul> + +<h2 id="举例">举例</h2> + +<pre>// html: <div id="top" /> +var t = document.getElementById("top"); +var idAttr = t.getAttributeNode("id"); +alert(idAttr.value == "top") +</pre> + +<h2 id="注意">注意</h2> + +<p>当在一个被标记为HTML文档的DOM中的HTML元素上调用这个方法时， getAttributeNode会将参数转变为小写形式。</p> + +<p>Attr 节点继承自Node，但不被认为是文档树的一部分。Node上定义的常用属性，如 parentNode, previousSibling, 和 nextSibling 对于 Attr节点来说都为null。然而，你可以使用 ownerElement 来得到拥有这个属性的元素。</p> + +<p><a href="/en/DOM/element.getAttribute" title="en/DOM/element.getAttribute">getAttribute</a> 通常用于替换getAttributeNode方法，来获得元素的属性值。性能也更快. 性能对比是 element.id 大于 element.getAttribute('id') 大于 element.getAttributeNode('id').nodeValue.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core: getAttributeNode</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/getattributenodens/index.html b/files/zh-cn/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..5b1c9d8181 --- /dev/null +++ b/files/zh-cn/web/api/element/getattributenodens/index.html @@ -0,0 +1,36 @@ +--- +title: Element.getAttributeNodeNS() +slug: Web/API/Element/getAttributeNodeNS +tags: + - API + - DOM +translation_of: Web/API/Element/getAttributeNodeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>通过命名空间 URI 和名称来获取属性节点。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) +</pre> + +<ul> + <li><code>attributeNode</code> 获取的属性节点.</li> + <li><code>namespace</code> 命名空间字符串</li> + <li><code>nodeName</code> 属性节点的名称.</li> +</ul> + +<p><span class="comment">== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre</span></p> + +<h2 id="Notes" name="Notes">笔记</h2> + +<p><code>getAttributeNodeNS</code> 相比 <a href="en/DOM/element.getAttributeNode">getAttributeNode</a> 更加具体，允许你在特定的命名空间里获取属性. 对应的 setter 方法是 <a href="en/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">规格</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> diff --git a/files/zh-cn/web/api/element/getboundingclientrect/index.html b/files/zh-cn/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..40d1d4488c --- /dev/null +++ b/files/zh-cn/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,97 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - CSSOM View + - Method + - Refrence + - 方法 +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.getBoundingClientRect()</strong></code> 方法返回元素的大小及其相对于视口的位置。</p> + +<p>如果是标准盒子模型，元素的尺寸等于<code>width/height</code> + <code>padding</code> + <code>border-width</code>的总和。如果<code>box-sizing: border-box</code>，元素的的尺寸等于 <code>width/height</code>。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>rectObject</var> = <var>object</var>.getBoundingClientRect(); +</pre> + +<h3 id="值">值</h3> + +<p>返回值是一个 {{domxref("DOMRect")}} 对象，这个对象是由该元素的 {{domxref("Element.getClientRects", "getClientRects()")}} 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有<code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, 和 <code>height</code>这几个以像素为单位的只读属性用于描述整个边框。除了<code>width</code> 和 <code>height</code> 以外的属性是相对于视图窗口的左上角来计算的。</p> + +<p><img alt="DOMRect 示例图" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;"><span>空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 </span><code>width</code><span>、</span><code>height</code><span> 值为 0，</span><code>left</code><span>、</span><code>top</code><span> 值为第一个 CSS 盒子（按内容顺序）的 top-left 值。</span></p> + +<p>当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。</p> + +<h3 id="跨浏览器兼容">跨浏览器兼容</h3> + +<p>如果需要更好的跨浏览器兼容性，请使用 {{domxref("window.pageXOffset")}} 和 {{domxref("window.pageYOffset")}} 代替 <code>window.scrollX</code> 和 <code>window.scrollY</code>。不能访问这些属性的脚本可以使用下面的代码：</p> + +<pre class="brush: js notranslate">// For scrollX +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft +// For scrollY +(((t = document.documentElement) || (t = document.body.parentNode)) + && typeof t.scrollTop == 'number' ? t : document.body).scrollTop</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js notranslate">// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象 +//译者注：DOMRect 是 TextRectangle 或 ClientRect 的标准名称，他们是相同的。 +var rect = obj.getBoundingClientRect(); +</pre> + +<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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="备注">备注</h3> + +<p>该API返回的 <code>DOMRect</code> 对象在现代浏览器中可以被修改。而对于返回值为 <code>DOMRectReadOnly</code> 的旧版本，返回值并不能被修改。在IE和Edge浏览器中，无法向他们返回的 <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a> 对象添加缺失的属性，对象可以防止 <code>x</code> 和 <code>y</code> 的回填。</p> + +<p>由于兼容性问题（见下文），尽量仅使用 <code>left</code>, <code>top</code>, <code>right</code>, 和 <code>bottom</code>.属性是最安全的。</p> + +<p>返回的 <code>DOMRect</code>对象中的属性不是自己的属性。 当使用<code>in</code> 和 <code>for...in</code> 运算符时能成功查找到返回的属性，但使用其他API（例如Object.keys（））查找时将失败。 而且，ES2015和更高版本的功能（如Object.assign（）和对象rest/spread）将无法复制返回的属性。</p> + +<pre class="brush: js notranslate">rect = elt.getBoundingClientRect() +// The result in emptyObj is {} +emptyObj = Object.assign({}, rect) +emptyObj = { ...rect } +{width, ...emptyObj} = rect +</pre> + +<p><code>DOMRect</code> 中的 <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> 属性是使用对象的其他属性的值来计算获得的。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div>{{Compat("api.Element.getBoundingClientRect")}}</div> + +<h2 id="参考资料">参考资料</h2> + +<ul> + <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, 更早版本的 <code>DOMRect</code></li> +</ul> diff --git a/files/zh-cn/web/api/element/getclientrects/index.html b/files/zh-cn/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..6d8bbc94ab --- /dev/null +++ b/files/zh-cn/web/api/element/getclientrects/index.html @@ -0,0 +1,225 @@ +--- +title: Element.getClientRects() +slug: Web/API/Element/getClientRects +tags: + - API + - CSSOM + - 参考 + - 方法 +translation_of: Web/API/Element/getClientRects +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>Element.getClientRects()</strong></code> 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>rectCollection</var> = <var>object</var>.getClientRects();</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回值是ClientRect对象集合，该对象是与该元素相关的CSS边框。每个ClientRect对象包含一组描述该边框的只读属性——left、top、right和bottom，单位为像素，这些属性值是相对于视口的top-left的。即使当表格的标题在表格的边框外面，该标题仍会被计算在内。</p> + +<p>起初，微软打算让这个方法给文本的每一行都返回一个TextRectangle，但是，CSSOM工作草案规定它应该给每个边框返回一个ClientRect。因此，对于行内元素这两个定义是相同的，但是对于块级元素，Mozilla只会返回一个矩形。（译者注：对于行内元素，元素内部的每一行都会有一个边框；对于块级元素，如果里面没有其他元素，一整块元素只有一个边框）。</p> + +<p>{{ fx_minversion_note(3.5, "FireFox 3.5给TextRectangle对象添加了width和height属性") }}</p> + +<p>当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作。</p> + +<p>返回的矩形不包括任何可能超出元素范围的子元素的边界。</p> + +<p>对于HTML AREA元素、自身不做任何渲染的SVG元素、display：none元素和不直接渲染出来的任何元素，都将会返回一个空列表。</p> + +<p>具有空边框的CSS盒子也会返回矩形，此时left、top、right和bottom坐标仍旧有意义。</p> + +<p>小数级别的像素偏移是有可能的。</p> + +<h2 id="示例">示例</h2> + +<p>These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class <code>withClientRectsOverlay</code>.</p> + +<h3 id="HTML">HTML</h3> + +<p>.举例1：HTML创建了三段带有 <code><span></code> 的段落 <code><p></code> 并放入 <code><div></code> 中。在第二个段落 <code><p></code> 上绘制了客户矩形。在第三个段落 <code><p></code> 的 <code><span></code> 元素上绘制了客户矩形。</p> + +<pre class="brush: html"><h3>A paragraph with a span inside</h3> +<p>Both the span and the paragraph have a border set. The + client rects are in red. Note that the p has onlyone border + box, while the span has multiple border boxes.</p> + +<div> + <strong>Original</strong> + <p> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>p's rect</strong> + <p class="withClientRectsOverlay"> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>span's rect</strong> + <p> + <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span> + </p> +</div></pre> + +<p>Example 2: 举例2：HTML 创建了3个有序列表。在第二个列表的 ol 上绘制了客户矩形，在第三个列表的 li 上绘制了客户矩形。</p> + +<pre class="brush: html" style="font-size: 14px;"><h3>A list</h3> +<p>Note that the border box doesn't include the number, so neither do the client rects.</p> + +<div> + <strong>Original</strong> + <ol> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</diV> + +<div> + <strong>ol's rect</strong> + <ol class="withClientRectsOverlay"> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</div> + +<div> + <strong>each li's rect</strong> + <ol> + <li class="withClientRectsOverlay">Item 1</li> + <li class="withClientRectsOverlay">Item 2</li> + </ol> +</div></pre> + +<p>举例3：HTML 创建了两个带有标题的表。第二个表上绘制了客户矩形。</p> + +<pre class="brush: html" style="font-size: 14px;"><h3>A table with a caption</h3> +<p>Although the table's border box doesn't include the caption, the client rects do include the caption.</p> + +<div> + <strong>Original</strong> + <table> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div> + +<div> + <strong>table's rect</strong> + <table class="withClientRectsOverlay"> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>使用 CSS 给第一举例的每个 div 内部的段落和 span、第二个举例的 ol 和 li 周围、第三个举例 的 table/th/td 元素周围绘制了边框。</p> + +<pre class="brush: css">strong { + text-align: center; +} +div { + display: inline-block; + width: 150px; +} +div p, ol, table { + border: 1px solid blue; +} +span, li, th, td { + border: 1px solid green; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>JavaScript 代码为所有带有“widthClientRectsOverlay”样式的元素绘制了ClientRects。</p> + +<pre class="brush: js">function addClientRectsOverlay(elt) { + // 为了使边框宽度与矩形宽度一致，这里给每个客户矩形上方绝对定位一个 div。 + // 注意:如果用户改变大小或者缩放，绘图将会重绘。 + + var rects = elt.getClientRects(); + for (var i = 0; i != rects.length; i++) { + var rect = rects[i]; + var tableRectDiv = document.createElement('div'); + tableRectDiv.style.position = 'absolute'; + tableRectDiv.style.border = '1px solid red'; + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; + tableRectDiv.style.margin = tableRectDiv.style.padding = '0'; + tableRectDiv.style.top = (rect.top + scrollTop) + 'px'; + tableRectDiv.style.left = (rect.left + scrollLeft) + 'px'; + // 我们希望 rect.width 作为边框宽度，所以内容宽度减少 2px + + tableRectDiv.style.width = (rect.width - 2) + 'px'; + tableRectDiv.style.height = (rect.height - 2) + 'px'; + document.body.appendChild(tableRectDiv); + } +} + +(function() { + /* 将所有具有 "widthClientRectsOverlay" 样式的元素依次传入函数 addClientRectsOverlay(elt) */ + var elt = document.getElementsByClassName('withClientRectsOverlay'); + for (var i = 0; i < elt.length; i++) { + addClientRectsOverlay(elt[i]); + } +})();</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('Element_getClientRects_sample', 680, 650) }}</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("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="规范_2" style="line-height: 30px; font-size: 2.14285714285714rem;">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/cssom-view/#the-getclientrects-and-getboundingclientrect-methods" rel="external nofollow">CSSOM Views: The getClientRects() and getBoundingClientRect() methods</a></p> + +<h3 id="备注">备注</h3> + +<p><code>getClientRects()</code> 在 MS IE DHTML 对象模型中首次引入。</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.Element.getClientRects")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element.getBoundingClientRect()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/getelementsbyclassname/index.html b/files/zh-cn/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..e8a2047b45 --- /dev/null +++ b/files/zh-cn/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,89 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +<p>{{APIRef}}</p> +<p><strong><code>Element.getElementsByClassName()</code></strong> 方法返回一个即时更新的（live） {{domxref("HTMLCollection")}}，包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时，会检索整个文档，包括根元素。</p> +<p>相似地，{{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} 方法会在整个文档上执行；它返回指定拥有指定 class 名称的 document 根节点的后代元素。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre> +<ul> + <li><em><var>elements</var></em> 是一个即时更新的（live）{{ domxref("HTMLCollection") }}。</li> + <li><em><var>names</var></em> 是一个字符串，表示要匹配的类名（class names）列表；类名被空白符分隔。</li> + <li><em>element</em> 是文档中的任一 {{domxref("Element")}}。</li> +</ul> +<h2 id="Examples" name="Examples">例子</h2> +<p>获取所有包含class名称为 test 的元素：</p> +<pre class="brush: js">element.getElementsByClassName('test');</pre> +<p>获取所有包含 <code>red</code> 和 <code>test</code> class名的元素：</p> +<pre class="brush: js">element.getElementsByClassName('red test');</pre> +<p>获取 <code>id</code> 为 <code>main</code> 的元素的所有包含一个 <code>test</code> class名的后代元素：</p> +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> +<p>可以在任何 {{domxref("HTMLCollection")}} 上面使用 {{jsxref("Array.prototype")}} 的方法，要把 <code>HTMLCollection</code> 作为该方法的上下文对象（this）。下例，查找类名为 <code>test</code> 的元素中的所有 {{HTMLElement("div")}} 元素：</p> +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'div'; +});</pre> +<h2 id="Browser_Compatibility" name="Browser_Compatibility">规范</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.</p> diff --git a/files/zh-cn/web/api/element/getelementsbytagname/index.html b/files/zh-cn/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..5f12087f21 --- /dev/null +++ b/files/zh-cn/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,133 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - 节点 +translation_of: Web/API/Element/getElementsByTagName +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Element.getElementsByTagName()</strong></code> 方法返回一个动态的包含所有指定标签名的元素的HTML集合{{domxref("HTMLCollection")}}。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用<code>Element.getElementsByTagName()</code> .</p> + +<p>如果是HTML文档中的某个元素调用了<code>getElementsByTagName函数，</code> 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的SVG元素中使用。 {{ domxref("Element.getElementsByTagNameNS()") }} 适用于那种情况.</p> + +<p><code>Element.getElementsByTagName</code> 和 {{domxref("Document.getElementsByTagName()")}}类似，除了它的搜索被限制为指定元素的后代。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> + +<ul> + <li><code>elements 搜索到的元素的动态HTML集合</code>{{domxref("HTMLCollection")}}，它们的顺序是<code>在子树中出现的顺序</code>。 如果没有搜索到元素则这个集合为空。</li> + <li><code>element</code> 搜索从element开始。请注意只有element的后代元素会被搜索，不包括元素自己。</li> + <li><code>tagName</code> 要查找的限定名。 字符 <code>"*"</code> 代表所有元素。 考虑到兼容XHTML，应该使用小写。</li> +</ul> + +<h2 id="实例">实例</h2> + +<pre class="brush: js">// check the alignment on a number of cells in a table. +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagName("td"); +for (var i = 0; i < cells.length; i++) { + var status = cells[i].getAttribute("data-status"); + if ( status == "open" ) { + // grab the data + } +} +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">参考</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</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 [2]</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>5.5</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + <td>{{ CompatVersionUnknown() }} [2]</td> + </tr> + <tr> + <td>getElementsByTagName("*")</td> + <td>1.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>6.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 19之前的版本，该方法会返回一个 {{domxref("NodeList")}}；之后根据规范进行了改变。</p> + +<p>[2] 最初，该方法会返回一个{{domxref("NodeList")}}；之后根据规范进行了改变。</p> diff --git a/files/zh-cn/web/api/element/getelementsbytagnamens/index.html b/files/zh-cn/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..fdb01aef9f --- /dev/null +++ b/files/zh-cn/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,128 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +translation_of: Web/API/Element/getElementsByTagNameNS +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.getElementsByTagNameNS()</strong></code> 方法返回在指定命名空间内带有指定名称的动态HTML元素集合（而不是快照），搜索范围限定于指定元素的后代，类似于{{Domxref("Document.getElementsByTagNameNS")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>elements</var> = <var>element</var>.getElementsByTagNameNS(<var>namespaceURI</var>, <var>localName</var>)</pre> + +<ul> + <li><code>elements</code> 是匹配元素的动态HTML元素集合{{domxref("HTMLCollection")}}，其顺序为遍历树时匹配元素出现的先后。</li> + <li><code>element</code> 是查找的起始结点，查找范围为该元素的后代，并且不包含该元素自身。</li> + <li><code>namespaceURI </code>是所要查询的元素的命名空间URL (参考 {{domxref("Node.namespaceURI")}}). 举个例子，如果你想查找的是XHTML元素，你应该使用XHTML的命名空间URL，<span class="nowiki"><code>http://www.w3.org/1999/xhtml。</code></span></li> + <li><code>localName </code>是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 {{domxref("Node.localName")}}).</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">// 检查一个XHTML文档中表格的单元格的对齐方式。 +var table = document.getElementById("forecast-table"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); + +for (var i = 0; i < cells.length; i++) { + var axis = cells[i].getAttribute("axis"); + if (axis == "year") { + // grab the data + } +}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td> + <td>{{Spec2('DOM2 Core')}}</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>Edge</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></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>getElementsByTagName("*")</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Initially, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the spec change.</p> + +<p>[2] The behavior of <code>element.getElementsByTagNameNS</code> changed between Firefox 3.5 and Firefox 3.6. In Firefox 3.5 and before, this function would automatically case-fold any queries so that a search for "foo" would match "Foo" or "foo". In Firefox 3.6 and later this function is now case-sensitive so that a query for "foo" will only match "foo" and not "Foo". For more background on this, please see the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=542185#c5">comment from Henri Sivonen about the change</a>. You can also look at the <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case Sensitivity in class and id Names">relevant part of the standard, which states which parts of the API are case-sensitive and which parts aren't</a>.</p> + +<p>Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the spec change.</p> diff --git a/files/zh-cn/web/api/element/hasattribute/index.html b/files/zh-cn/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..7d5a72f87c --- /dev/null +++ b/files/zh-cn/web/api/element/hasattribute/index.html @@ -0,0 +1,31 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>hasAttribute</code> 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>var result</var> = <var>element</var>.hasAttribute(<var>attName</var>); +</pre> +<ul> + <li><code>result</code> 为返回的布尔值：<code>true</code> 或 <code>false</code>。</li> + <li><code>attName</code> 是一个字符串，表示属性的名称。</li> +</ul> +<h2 id="Example" name="Example">例子</h2> +<pre class="brush:js">// 在为属性设置新值前检测该属性是否存在 +var d = document.getElementById("div1"); + +if (d.hasAttribute("align")) { + d.setAttribute("align", "center"); +}</pre> +<h2 id="Notes" name="Notes">备注</h2> +<div> + {{DOMAttributeMethods}}</div> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">DOM Level 2 Core: hasAttribute</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-ElHasAttr">DOM Level 3 Core: hasAttribute</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/hasattributens/index.html b/files/zh-cn/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..31adc64e89 --- /dev/null +++ b/files/zh-cn/web/api/element/hasattributens/index.html @@ -0,0 +1,47 @@ +--- +title: Element.hasAttributeNS() +slug: Web/API/Element/hasAttributeNS +tags: + - API + - 元素 + - 属性 + - 方法 +translation_of: Web/API/Element/hasAttributeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><code>hasAttributeNS</code> 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>result</em> =<em>element</em>.hasAttributeNS(<em>namespace</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>result</code> 为返回的布尔值：<code>true</code> 或 <code>false</code>。</li> + <li><code>namespace</code> 是一个字符串，表示属性的命名空间。</li> + <li><code>localName</code> 是一个字符串，表示属性的名称。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre>// 在为属性设置值之前检测该属性是否存在 +var d = document.getElementById("div1"); +if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); +} +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>该方法与<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/element/hasAttribute" title="此页面仍未被本地化, 期待您的翻译!"><code>hasAttribute</code></a>类似，只是要检查的属性由命名空间和名称指定。只有使用命名空间的 XML 文档才使用方法</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS</a></p> diff --git a/files/zh-cn/web/api/element/hasattributes/index.html b/files/zh-cn/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..bb4b6b2256 --- /dev/null +++ b/files/zh-cn/web/api/element/hasattributes/index.html @@ -0,0 +1,23 @@ +--- +title: Node.hasAttributes +slug: Web/API/Element/hasAttributes +translation_of: Web/API/Element/hasAttributes +--- +<div> + {{ApiRef}}</div> +<div> + {{ obsolete_header(22) }}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>hasAttributes</code>属性返回一个布尔值<code>true</code>或<code>false</code>,来表明当前元素节点是否有至少一个的属性(attribute).</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>result</var> = <var>targetNode</var>.hasAttributes();</pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js;highlight:[3]">var t1 = document.getElementById("table-data"); + +if ( t1.hasAttributes() ) { + // 可以用t1.attributes来读取该元素的所有属性 +}</pre> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/id/index.html b/files/zh-cn/web/api/element/id/index.html new file mode 100644 index 0000000000..7bebb2d2eb --- /dev/null +++ b/files/zh-cn/web/api/element/id/index.html @@ -0,0 +1,73 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - 元素 + - 参考 + - 属性 +translation_of: Web/API/Element/id +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>{{domxref("Element")}} 接口的 <strong><code>id</code></strong> 属性表示元素的标识符，与全局属性 <code><strong><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></strong></code> 对应。</p> + +<p>同一文档中，若 <code>id</code> 的值不是空字符串 <code>""</code>，便必须是独特的；也就是说，不同元素的 ID 必须是不同的。</p> + +<p>这有助于让常用的 {{domxref("document.getElementById", "getElementById")}} 方法通过 <code>id</code> 的值找到对应的单个元素。另外，在 <a href="/zh-CN/docs/Web/CSS">CSS</a> 中，ID 可作为选择器使用，详见：<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors">ID 选择器</a>。</p> + +<div class="note"> +<p><strong>注意：</strong>虽然 ID 是区分大小写的, 但是不应该同时使用仅大小写有不同的 ID 值。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>idStr</em> = <em>element</em>.id; // Get the id +<em>element</em>.id = <em>idStr</em>; // Set the id +</pre> + +<ul> + <li><code>idStr</code>，元素的 ID 属性值。</li> +</ul> + +<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('DOM WHATWG', '#dom-element-id', 'id')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM1')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.id")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>DOM 全局属性 <a href="/zh-CN/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a>。</li> +</ul> diff --git a/files/zh-cn/web/api/element/index.html b/files/zh-cn/web/api/element/index.html new file mode 100644 index 0000000000..4fa0547838 --- /dev/null +++ b/files/zh-cn/web/api/element/index.html @@ -0,0 +1,488 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM参考 + - Element + - 元素 + - 参考 + - 接口 +translation_of: Web/API/Element +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><strong><code>Element</code></strong> 是一个通用性非常强的基类，所有 {{DOMxRef("Document")}} 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 <code>Element</code> 并且增加了一些额外功能的接口描述了具体的行为。</span>例如， {{DOMxRef("HTMLElement")}} 接口是所有 HTML 元素的基本接口，而 {{DOMxRef("SVGElement")}} 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。</p> + +<p>在 Web 平台的领域以外的语言，比如 XUL，通过 <code>XULElement</code> 接口，同样也实现了 <code>Element</code> 接口。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<p><em>所有属性继承自它的祖先接口 {{DOMxRef("Node")}}，并且扩展了 {{DOMxRef("Node")}} 的父接口 {{DOMxRef("EventTarget")}}，并且从以下部分继承了属性：{{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}，</em>和 {{DOMxRef("Animatable")}}。</p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>返回一个与该元素相关的所有属性集合 {{DOMxRef("NamedNodeMap")}}。</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>返回该元素包含的 class 属性，是一个 {{DOMxRef("DOMTokenList")}}。</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>一个 {{DOMxRef("DOMString")}}，表示这个元素的 class。</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>返回{{jsxref("Number")}} 表示内部相对于外层元素的高度。</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>返回{{jsxref("Number")}}表示该元素距离它左边界的宽度。</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>返回 {{jsxref("Number")}} 表示该元素距离它上边界的高度。</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>返回{{jsxref("Number")}} 表示该元素内部的宽度。</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element.</dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>是一个{{DOMxRef("DOMString")}} 表示这个元素的id。</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>是一个{{DOMxRef("DOMString")}} 表示这个元素的内容文本。</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>是一个 {{DOMxRef("DOMString")}} 表示这个元素名称本地化的部分。</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>元素对应的 namespace URI ，如果没有则返回 <code>null</code> + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>是一个{{DOMxRef("Element")}}, 该元素下一个兄弟节点, 如果为null表示不存在..</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>是一个 {{DOMxRef("DOMString")}}，获取该DOM元素及其后代的HTML文本。在设置它的时候，会从给定的字符串开始解析，替换自身。</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>是一个 {{DOMxRef("Element")}}, 该元素上一个兄弟节点, 如果为null表示不存在..</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>返回类型为： {{jsxref("Number")}}，表示元素的滚动视图高度。</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>返回类型为：{{jsxref("Number")}}，表示该元素横向滚动条距离最左的位移.</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>返回类型为： {{jsxref("Number")}}，表示该元素横向滚动条可移动的最大值</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>返回类型为：{{jsxref("Number")}} ，表示该元素纵向滚动条距离</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>返回类型为：{{jsxref("Number")}} ，表示该元素纵向滚动条可移动的最大值</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>返回类型为： {{jsxref("Number")}} ，表示元素的滚动视图宽度。</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3> + +<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">事件句柄</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>事件 {{event("fullscreenchange")}} 的回调方法, 在元素进入或退出全屏模式时触发. 不仅可用于观察（监听）可预期的过度变化，还可以观察（监听）未知的变化，如：当你的应用程序在后台运行。</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>事件 {{event("fullscreenerror")}} 的回调方法, 在进入全屏模式过程中出现错误时触发.</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>返回元素的大小及其相对于视口的位置。</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>参数中给出类的列表，返回一个动态的 {{DOMxRef("HTMLCollection")}} ，包含了所有持有这些类的后代元素。</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{DOMxRef("Element.scroll()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.scrollBy()")}}</dt> + <dd>Scrolls an element by the given amount.</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{DOMxRef("Element.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> +</dl> + +<h2 id="事件">事件</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{DOMxRef("Element/cancel_event", "cancel")}}</dt> + <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt> + <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onerror", "onerror")}} property.</dd> + <dt>{{DOMxRef("Element/scroll_event", "scroll")}}</dt> + <dd>Fired when the document view or an element has been scrolled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> + <dt>{{DOMxRef("Element/select_event", "select")}}</dt> + <dd>Fired when some text has been selected.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd> + <dt>{{DOMxRef("Element/show_event", "show")}}</dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd> + <dt>{{DOMxRef("Element/wheel_event","wheel")}}</dt> + <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd> +</dl> + +<h3 id="剪贴板事件">剪贴板事件</h3> + +<dl> + <dt>{{DOMxRef("Element/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/oncopy", "oncopy")}} property.</dd> + <dt>{{DOMxRef("Element/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/oncut", "oncut")}} property.</dd> + <dt>{{DOMxRef("Element/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{DOMxRef("HTMLElement/onpaste", "onpaste")}} property.</dd> +</dl> + +<h3 id="Composition_events">Composition events</h3> + +<dl> + <dt>{{DOMxRef("Element/compositionend_event", "compositionend")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd> + <dt>{{DOMxRef("Element/compositionstart_event", "compositionstart")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd> + <dt>{{DOMxRef("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt>{{DOMxRef("Element/blur_event", "blur")}}</dt> + <dd>Fired when an element has lost focus.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onblur", "onblur")}} property.</dd> + <dt>{{DOMxRef("Element/focus_event", "focus")}}</dt> + <dd>Fired when an element has gained focus.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> + <dt>{{DOMxRef("Element/focusin_event", "focusin")}}</dt> + <dd>Fired when an element is about to gain focus.</dd> + <dt>{{DOMxRef("Element/focusout_event", "focusout")}}</dt> + <dd>Fired when an element is about to lose focus.</dd> +</dl> + +<h3 id="Fullscreen_events">Fullscreen events</h3> + +<dl> + <dt><code>{{DOMxRef("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt> + <dd>Sent to an {{DOMxRef("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{DOMxRef("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd> + <dt><code>{{DOMxRef("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt> + <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{DOMxRef("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd> +</dl> + +<h3 id="键盘事件">键盘事件</h3> + +<dl> + <dt><code>{{DOMxRef("Element/keydown_event", "keydown")}}</code></dt> + <dd>Fired when a key is pressed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd> + <dt><code>{{DOMxRef("Element/keypress_event", "keypress")}}</code></dt> + <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd> + <dt><code>{{DOMxRef("Element/keyup_event", "keyup")}}</code></dt> + <dd>Fired when a key is released.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd> +</dl> + +<h3 id="鼠标事件">鼠标事件</h3> + +<dl> + <dt>{{DOMxRef("Element/auxclick_event", "auxclick")}}</dt> + <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd> + <dt>{{DOMxRef("Element/click_event", "click")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onclick", "onclick")}} property.</dd> + <dt>{{DOMxRef("Element/contextmenu_event", "contextmenu")}}</dt> + <dd>Fired when the user attempts to open a context menu.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd> + <dt>{{DOMxRef("Element/dblclick_event", "dblclick")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd> + <dt>{{DOMxRef("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> + <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.</dd> + <dt>{{DOMxRef("Element/mousedown_event", "mousedown")}}</dt> + <dd>Fired when a pointing device button is pressed on an element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd> + <dt>{{DOMxRef("Element/mouseenter_event", "mouseenter")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd> + <dt>{{DOMxRef("Element/mouseleave_event", "mouseleave")}}</dt> + <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd> + <dt>{{DOMxRef("Element/mousemove_event", "mousemove")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd> + <dt>{{DOMxRef("Element/mouseout_event", "mouseout")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd> + <dt>{{DOMxRef("Element/mouseover_event", "mouseover")}}</dt> + <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd> + <dt>{{DOMxRef("Element/mouseup_event", "mouseup")}}</dt> + <dd>Fired when a pointing device button is released on an element.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd> + <dt>{{DOMxRef("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd> + <dt>{{DOMxRef("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd> + <dt>{{DOMxRef("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> + <dd>Fired before the {{DOMxRef("Element/mousedown_event", "mousedown")}} event.</dd> + <dt>{{DOMxRef("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> + <dd>Fired after the {{DOMxRef("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd> +</dl> + +<h3 id="Touch_events">Touch events</h3> + +<dl> + <dt>{{DOMxRef("Element/touchcancel_event", "touchcancel")}}</dt> + <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> + <dt>{{DOMxRef("Element/touchend_event", "touchend")}}</dt> + <dd>Fired when one or more touch points are removed from the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> + <dt>{{DOMxRef("Element/touchmove_event", "touchmove")}}</dt> + <dd>Fired when one or more touch points are moved along the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> + <dt>{{DOMxRef("Element/touchstart_event", "touchstart")}}</dt> + <dd>Fired when one or more touch points are placed on the touch surface.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> +</dl> + +<dl> + <dt></dt> +</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>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td> + <td>{{Spec2("CSS4 Pseudo-Elements")}}</td> + <td>Added the <code>pseudo()</code> method.</td> + </tr> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimations()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/zh-cn/web/api/element/innerhtml/index.html b/files/zh-cn/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..507d611b40 --- /dev/null +++ b/files/zh-cn/web/api/element/innerhtml/index.html @@ -0,0 +1,218 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - Element.innerHTML + - Element.insertAdjacentHTML() +translation_of: Web/API/Element/innerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.innerHTML</code></strong> 属性设置或获取HTML语法表示的元素的后代。</p> + +<div class="note"> +<p><strong>Note: </strong>如果一个 {{HTMLElement("div")}}, {{HTMLElement("span")}}, 或 {{HTMLElement("noembed")}} 节点有一个文本子节点，该节点包含字符 <code>(&),</code> <code>(<),</code> 或<code>(>)</code>, <code>innerHTML</code> 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用{{domxref("Node.textContent")}} 可获取一个这些文本节点内容的正确副本。</p> +</div> + +<p>如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 方法。</p> + +<h2 id=".E8.AF.AD.E6.B3.95" name=".E8.AF.AD.E6.B3.95">语法</h2> + +<pre class="brush: js">const content = element.innerHTML; +element.innerHTML = htmlString; +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("DOMString")}} 包含元素后代的HTML序列。设置元素的 <code>innerHTML</code> 将会删除所有该元素的后代并以上面给出的 htmlString 替代。</p> + +<h3 id="例外">例外</h3> + +<p><strong><code>SyntaxError</code> </strong></p> + +<p> 当 HTML 没有被正确标记时，设置 <code>innerHTML</code> 将会抛出语法错误。</p> + +<p><strong><code>NoModificationAllowedError</code> </strong></p> + +<p> 当父元素是 {{domxref("Document")}} 时，设置 <code>innerHTML</code> 将会提示不允许修改。</p> + +<h2 id="使用说明">使用说明</h2> + +<p><code>innerHTML</code> 属性可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。</p> + +<h3 id="获取元素的HTML">获取元素的HTML</h3> + +<p>获取 <code>innerHTML</code> 会导致用户代理序列化 由元素后代组成的 HTML 或者 XML 。返回结果字符串。</p> + +<pre class="brush: js"><code>let contents = myElement.innerHTML;</code> +</pre> + +<p>查看元素内容节点的 HTML 标记。</p> + +<div class="note"> +<p><strong>注</strong>：返回的 HTML 或者 XML 片段是基于当前元素的内容生成的，所以返回的标记和格式可能与原始页面的标记不匹配。</p> +</div> + +<h3 id="替换元素的内容">替换元素的内容</h3> + +<p>设置 <code>innerHTML</code> 的值可以让你轻松地将当前元素的内容替换为新的内容。</p> + +<p>举个例子来说，你可以通过文档 {{domxref("Document.body", "body")}} 属性删除 body 的全部内容。</p> + +<pre class="brush: js"><code>document.body.innerHTML = "";</code> +</pre> + +<p>下面这个例子，首先获取文档当前的 HTML 标记并替换 <code>"<"</code> 字符为 HTML 实体 <code>"&lt;"</code>，从本质上来看，它是将 HTML 转换成原始文本，将其包裹在 {{HTMLElement("pre")}} 元素中。然后 <code>innerHTML</code> 的值被替换成新的字符串。最后，文档的内容被替换为页面显示源码。</p> + +<pre class="brush: js"><code>document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</code> +</pre> + +<h4 id="其他：">其他：</h4> + +<p>当给 <code>innerHTML</code> 设置一个值的时候到底发生了什么？用户代理按照以下步骤：</p> + +<ol> + <li>给定的值被解析为 HTML 或者 XML （取决于文档类型），结果就是 {{domxref("DocumentFragment")}} 对象代表元素新设置的 DOM 节点。</li> + <li>如果元素内容被替换成 {{HTMLElement("template")}} 元素，<code><template></code> 元素的 {{domxref("HTMLTemplateElement.content", "content")}} 属性会被替换为步骤1中创建的新的 <code>DocumentFragment</code>。</li> + <li>对于其他所有元素，元素的内容都被替换为新的 <code>DocumentFragment</code>节点。</li> +</ol> + +<h3 id="安全问题">安全问题</h3> + +<p>用 <code>innerHTML</code> 插入文本到网页中并不罕见。但这有可能成为网站攻击的媒介，从而产生潜在的安全风险问题。</p> + +<pre class="brush: js"><code>const name = "John"; +// assuming 'el' is an HTML DOM element +el.innerHTML = name; // harmless in this case + +// ... + +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // harmless in this case</code> +</pre> + +<p>尽管这看上去像 {{interwiki("wikipedia", "cross-site scripting")}} 攻击，结果并不会导致什么。HTML 5 中指定不执行由 <code>innerHTML</code> 插入的 {{HTMLElement("script")}} 标签。</p> + +<p>然而，有很多不依赖 {{HTMLElement("script")}} 标签去执行 JavaScript 的方式。所以当你使用<code>innerHTML</code> 去设置你无法控制的字符串时，这仍然是一个安全问题。例如：</p> + +<pre class="brush: js"><code>const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // shows the alert</code> +</pre> + +<p>基于这个原因，当插入纯文本时，建议不要使用 <code>innerHTML</code> 。取而代之的是使用 {{domxref("Node.textContent")}} ，它不会把给定的内容解析为 HTML，它仅仅是将原始文本插入给定的位置。</p> + +<div class="warning"> +<p><strong>警告</strong>：如果你的项目将要经过各种形式的安全检查的话，使用 <code>innerHTML</code> 可能导致代码被拒绝。例如，如果你在<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">浏览器扩展</a>中<a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">使用</a><a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"> <code>innerHTML</code></a> 并将扩展提交到 <a href="https://addons.mozilla.org/">addons.mozilla.org</a> 的话，它将会在自动审核过程中被拒绝。</p> +</div> + +<h2 id="例子">例子</h2> + +<p>这个例子使用 <code>innerHTML</code> 创建一种机制用于将消息记录到网页上的框中。</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js"><code>function log(msg) { + var logElem = document.querySelector(".log"); + + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} + +log("Logging mouse events inside this container...");</code> +</pre> + +<p>log() 函数通过 {{jsxref("Date")}} 对象的 {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} 方法获取当前时间，然后将消息文本和时间戳放一起构建一个字符串，最后将其追加到具有 “log” 类的框上。</p> + +<p>现在添加第二个方法：记录基于事件 (比如 {{event("mousedown")}}, {{event("click")}}, 和 {{event("mouseenter")}}) 的 {{domxref("MouseEvent")}} 的信息。</p> + +<pre class="brush: js"><code>function logEvent(event) { + var msg = "Event <strong>" + event.type + "</strong> at <em>" + + event.clientX + ", " + event.clientY + "</em>"; + log(msg); +}</code> +</pre> + +<p>然后我们使用它作为包含我们消息的框上的鼠标事件的事件处理程序：</p> + +<pre class="brush: js"><code>var boxElem = document.querySelector(".box"); + +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</code> +</pre> + +<h3 id="HTML">HTML</h3> + +<p>这个例子的 HTML 代码就相当简洁了：</p> + +<pre class="brush: html"><code><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></code> +</pre> + +<p>具有 “box” 类的 {{HTMLElement("div")}} 容器仅仅是出于布局考虑，用一个框来展示其内容。具有 “log” 类的 <div> 元素是作为消息本身的内容框。</p> + +<h3 id="CSS">CSS</h3> + +<p>下面是这个例子的 CSS：</p> + +<pre class="brush: css"><code>.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} + +.log { + margin-top: 8px; + font-family: monospace; +}</code> +</pre> + +<h3 id="结果">结果</h3> + +<p>结果就像下面展示的那样。你可以通过移动鼠标进出盒子，点击盒子等等来查看记录输出。</p> + +<p>{{EmbedLiveSample("Example", 640, 350)}}</p> + +<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('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.innerHTML")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>Parsing HTML into a DOM tree: {{domxref("DOMParser")}}</li> + <li>Serializing XML or HTML into a DOM tree: {{domxref("XMLSerializer")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/insertadjacentelement/index.html b/files/zh-cn/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..da93a6ebb0 --- /dev/null +++ b/files/zh-cn/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,164 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - Element.insertAdjacentElement() + - insertAdjacentElement() +translation_of: Web/API/Element/insertAdjacentElement +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>insertAdjacentElement()</code> </strong>方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><em>element</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>position</dt> + <dd>A {{domxref("DOMString")}} 表示相对于该元素的位置；必须是以下字符串之一： + <ul> + <li><code style="color: red;">'beforebegin'</code>: 在该元素本身的前面.</li> + <li><code style="color: green;">'afterbegin'</code>:只在该元素当中, 在该元素第一个子孩子前面.</li> + <li><code style="color: blue;">'beforeend'</code>:只在该元素当中, 在该元素最后一个子孩子后面.</li> + <li><code style="color: magenta;">'afterend'</code>: 在该元素本身的后面.</li> + </ul> + </dd> + <dt>element</dt> + <dd>要插入到树中的元素.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>插入的元素，插入失败则返回null.</p> + +<h3 id="异常">异常</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">异常</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td>插入的位置是一个无法识别的值。</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>插入的元素不是一个有效元素。</td> + </tr> + </tbody> +</table> + +<h3 id="位置命名的可视化展示">位置命名的可视化展示</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>注:</strong> 当节点处于DOM树中而且有一个父元素的时候 <code>beforebegin</code> 和 <code>afterend操作才能起作用。</code></div> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">beforeBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + activeElem.insertAdjacentElement('beforebegin',tempDiv); + setListener(tempDiv); +}); + +afterBtn.addEventListener('click', function() { + var tempDiv = document.createElement('div'); + tempDiv.style.backgroundColor = randomColor(); + activeElem.insertAdjacentElement('afterend',tempDiv); + setListener(tempDiv); +});</pre> + +<p>看看我们在 Github （也可以参考 <a href="https://github.com/mdn/insert-adjacent/blob/master/insertAdjacentElement.html">源码</a>）上的 <a href="http://mdn.github.io/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> 演示。在一个容器当中我们有一组{{htmlelement("div")}} 元素。 点击其中一个div时，这个容器会处于选中状态，然后你就可以按下<em>Insert before</em> 或<em>Insert after</em> 按钮通过 <code>insertAdjacentElement()方法</code>来把一个新的divs 插入到选中的元素前面或者后面。</p> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("48.0") }}</td> + <td>8</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("48.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.appendChild()")}} (same effect as <code>beforeend</code>)</li> +</ul> diff --git a/files/zh-cn/web/api/element/insertadjacenthtml/index.html b/files/zh-cn/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..e0ea9cda90 --- /dev/null +++ b/files/zh-cn/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,100 @@ +--- +title: element.insertAdjacentHTML +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - DOM + - DOM Element Methods + - HTML5 & ES6 + - Method + - insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> 方法将指定的文本解析为 {{domxref("Element")}} 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。</p> + +<h2 id="语法">语法</h2> + +<pre class="eval notranslate"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>); +</pre> + +<dl> + <dt><code>position</code></dt> + <dd>一个 {{domxref("DOMString")}}，表示插入内容相对于元素的位置，并且必须是以下字符串之一： + <ul> + <li><code><span style="display: none;"> </span><span style="display: none;"> </span>'beforebegin'</code>：元素自身的前面。</li> + <li><code>'afterbegin'</code>：<font face="Open Sans, Arial, sans-serif">插入元素内部的第一个子节点之前</font>。</li> + <li><code>'beforeend'</code>：插入元素内部的最后一个子节点之后。</li> + <li><code>'afterend'</code>：元素自身的后面。<span style="display: none;"> </span><span style="display: none;"> </span></li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>是要被解析为HTML或XML元素，并插入到DOM树中的 {{domxref("DOMString")}}。</dd> +</dl> + +<h3 id="位置名称的可视化">位置名称的可视化</h3> + +<pre class="notranslate"><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code></p> +</code><!-- <strong><code style="color: magenta;">afterend</code></strong> --> +</pre> + +<div class="note"><strong>注意：</strong> beforebegin和afterend位置，仅在节点在树中且节点具有一个parent元素时工作。</div> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js notranslate" dir="rtl">// 原为 <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// 此时，新结构变成： +// <div id="one">one</div><div id="two">two</div> +</pre> + +<h2 id="Specification" name="Specification">注意</h2> + +<h3 id="安全问题">安全问题</h3> + +<p>使用 <code>insertAdjacentHTML</code> 插入用户输入的HTML内容的时候，需要转义之后才能使用。</p> + +<p>如果只是为了插入文本内容（而不是HTML节点），不建议使用这个方法，建议使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants."><code>node.textContent</code></a> 或者 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentText" title="The insertAdjacentText() method inserts a given text node at a given position relative to the element it is invoked upon."><code>node.insertAdjacentText()</code></a>。因为这样不需要经过HTML解释器的转换，性能会好一点。</p> + +<h2 id="Specification" name="Specification" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</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('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</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.Element.insertAdjacentHTML")}}</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>包括Henri Sivonen 在内的某些 <a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org 客座文章</a> 显示，<code>insertAdjacentHTML</code> 在某些情况下可以更快。</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/insertadjacenttext/index.html b/files/zh-cn/web/api/element/insertadjacenttext/index.html new file mode 100644 index 0000000000..39d8af60fe --- /dev/null +++ b/files/zh-cn/web/api/element/insertadjacenttext/index.html @@ -0,0 +1,151 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +tags: + - Element.insertAdjacentText() +translation_of: Web/API/Element/insertAdjacentText +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>insertAdjacentText()</code></strong> 方法将一个给定的文本节点插入在相对于被调用的元素给定的位置。</p> + +<h2 id="Syntax" name="Syntax">句法</h2> + +<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>position</dt> + <dd>A {{domxref("DOMString")}} representing the position relative to the <code>element</code>; must be one of the following strings: + <ul> + <li><code style="color: red;">'beforebegin'</code>: Before the <code>element</code> itself.</li> + <li><code style="color: green;">'afterbegin'</code>: Just inside the <code>element</code>, before its first child.</li> + <li><code style="color: blue;">'beforeend'</code>: Just inside the <code>element</code>, after its last child.</li> + <li><code style="color: magenta;">'afterend'</code>: After the <code>element</code> itself.</li> + </ul> + </dd> + <dt>element</dt> + <dd>A {{domxref("DOMString")}} representing the text to be inserted into the tree.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>Void.</p> + +<h3 id="例外">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Explanation</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td>The <code>position</code> specified is not a recognised value.</td> + </tr> + </tbody> +</table> + +<h3 id="Visualization_of_position_names">Visualization of position names</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note">注意：只有当节点位于树中并具有元素父元素时，beforebegin和afterend位置才能工作。</div> + +<h2 id="Example" name="Example">范例</h2> + +<pre class="brush: js">beforeBtn.addEventListener('click', function() { + para.insertAdjacentText('afterbegin',textInput.value); +}); + +afterBtn.addEventListener('click', function() { + para.insertAdjacentText('beforeend',textInput.value); +});</pre> + +<p>Have a look at our <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> demo on GitHub (see the <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a> too.) Here we have a simple paragraph. You can enter some text into the form element, then press the <em>Insert before</em> and <em>Insert after</em> buttons to insert it before or after the existing paragraph text using <code>insertAdjacentText()</code>. Note that the existing text node is not added to — further text nodes are created containing the new additions.</p> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("48.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("48.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentHTML()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/keydown_event/index.html b/files/zh-cn/web/api/element/keydown_event/index.html new file mode 100644 index 0000000000..2576b577f2 --- /dev/null +++ b/files/zh-cn/web/api/element/keydown_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'Element: 键盘按下事件' +slug: Web/API/Element/keydown_event +translation_of: Web/API/Element/keydown_event +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><code><strong>keydown</strong></code>事件触发于键盘按键按下的时候。</p> + +<p>与{{Event("keypress")}} 事件不同的是, 所有按键均会触发<code>keydown</code>事件，无论这些按键是否会产生字符值。</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}</td> + </tr> + </tbody> +</table> + +<p><code>keydown</code> 与 <code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code> 事件捕获了键盘按键的操作，而 <code>keypress</code> 反映了具体输入某个字符的值。比如, 小写"a" 在<code>keydown</code> 和 <code>keyup</code>事件中输出的是大写A的Unicode编码65，但是在<code>keypress</code>中输出的就是小写"a"的Unicode编码97。大写 "A"在这些事件中输出的都是Unicode编码65。</p> + +<p>键盘事件只能由 <code><inputs></code>, <code><textarea></code> 以及任何具有 <code>contentEditable</code> 或 <code>tabindex="-1"</code>属性的组件触发。</p> + +<p>自 Firefox 65起, <code>keydown</code> 与 <code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code> 事件会在IME（输入法编辑器）复合事件中被触发,目的是为了提升CJKT（中日韩台地区）用户跨浏览器性能, ({{bug(354358)}}，更多详情访问 <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup events are now fired during IME composition</a> ). 若要忽略复合事件中所有 <code>keydown</code> 事件, 可以按照如下代码修改 (229是某个在IME中触发的键盘事件对应的 <code>keyCode</code>):</p> + +<pre class="brush: js">eventTarget.addEventListener("keydown", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // do something +}); +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="addEventListener_keydown_示例">addEventListener keydown 示例</h3> + +<p>这个例子展示了当你在{{HtmlElement("input")}}元素中按下一个按键时， {{domxref("KeyboardEvent.code")}} 的取值 </p> + +<pre class="brush: html"><input placeholder="Click here, then press down a key." size="40"> +<p id="log"></p></pre> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('keydown', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p> + +<h3 id="onkeydown_示例">onkeydown 示例</h3> + +<pre class="brush: js">input.onkeydown = logKey;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("UI Events", "#event-type-keydown")}}</td> + <td>{{Spec2("UI Events")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.Element.keydown_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code></li> + <li><a href="/en-US/docs/Web/API/Document/keydown_event">Document <code>keydown</code> event</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/keyup_event/index.html b/files/zh-cn/web/api/element/keyup_event/index.html new file mode 100644 index 0000000000..17df6b0336 --- /dev/null +++ b/files/zh-cn/web/api/element/keyup_event/index.html @@ -0,0 +1,97 @@ +--- +title: 'Element: keyup event' +slug: Web/API/Element/keyup_event +translation_of: Web/API/Element/keyup_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>keyup</code></strong> 事件在按键被松开时触发。</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>冒泡</th> + <td>是</td> + </tr> + <tr> + <th>可取消</th> + <td>是</td> + </tr> + <tr> + <th>接口</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>事件处理函数属性</th> + <td>{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}</td> + </tr> + </tbody> +</table> + +<p><code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code> 和 <code>keyup</code> 事件提供指出哪个键被按下的代码，而 <code>keypress</code> 指出哪些字符被输入。例如，小写字母 “a” 在 <code>keydown</code> 和 <code>keyup</code> 时会被报告为 65，但在 <code>keypress</code> 时为 97。所有事件均将大写字母 “A” 报告为 65。</p> + +<p>从 Firefox 65 开始，<code>keyup</code> 和 <code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code> 事件在 IME 编辑时也会被触发，以提升 CJKT 用户的跨浏览器兼容性（{{bug(354358)}}，另请参阅 <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup events are now fired during IME composition</a> 获取更多有用的详情）。要忽略 IME 编辑时的所有 <code>keyup</code> 事件，请执行以下操作（229 是一个关于被 IME 加工过的事件的 <code>keyCode</code> 的特殊值 ）：</p> + +<pre class="brush: js">eventTarget.addEventListener("keyup", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // do something +}); +</pre> + +<h2 id="例子">例子</h2> + +<h3 id="addEventListener_keyup_例子">addEventListener keyup 例子</h3> + +<p>在这个例子中，每当你在 {{HtmlElement("input")}} 元素里松开一个键，将会打印 {{domxref("KeyboardEvent.code")}} 的值。</p> + +<pre class="brush: html"><input placeholder="Click here, then press and release a key." size="40"> +<p id="log"></p></pre> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('keyup', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keyup_example")}}</p> + +<h3 id="等效的_onkeyup">等效的 onkeyup</h3> + +<pre class="brush: js">input.onkeyup = logKey;</pre> + +<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("UI Events", "#event-type-keyup")}}</td> + <td>{{Spec2("UI Events")}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.keyup_event")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li> + <li><a href="/en-US/docs/Web/API/Document/keyup_event">Document <code>keyup</code> event</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/localname/index.html b/files/zh-cn/web/api/element/localname/index.html new file mode 100644 index 0000000000..5aed44e37b --- /dev/null +++ b/files/zh-cn/web/api/element/localname/index.html @@ -0,0 +1,146 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +translation_of: Web/API/Element/localName +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.localName</strong></code> 只读属性，返回本地名称的.</p> + +<div class="note"> +<p>在DOM4之前这个API定义在{{domxref("Node")}}接口。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName +</pre> + +<h3 id="返回值">返回值</h3> + +<p> {{domxref("DOMString")}} 返回元素限定名的本地部分。</p> + +<h2 id="示例">示例</h2> + +<p>(必须配合XML文档类型, 如 <code>text/xml</code> 或 <code>application/xhtml+xml</code>.)</p> + +<pre class="brush:xml"><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +</pre> + +<h2 id="说明">说明</h2> + +<p>节点的本地名称是节点限定名的一部分出现在冒号之后. 限定名通常当作特定XML文档命名空间的一部分.例如在限定名 <code>ecomm:partners中 partners是本地名,ecomm是前缀。</code></p> + +<pre class="brush:xml"><ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> + +<div class="note"> +<p><strong>提示:</strong> 在 {{Gecko("1.9.2")}} 之前, 此属性返回HTML DOM的HTML元素本地名称的大写版本 (而不是XML DOM的HTML元素). 在最后一个版本, 符合HTML5规范下, 当HTML DOM的HTML或XML DOMs的XHTML的小写元素时此属性返回内部DOM storage。{{domxref("element.tagName","tagName")}} 属性仍然返回HTML DOM的HTML元素本地名称的大写版本.</p> +</div> + +<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('DOM4', '#interface-element', 'Element.localName')}}</td> + <td>{{Spec2('DOM4')}}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 此 API 之前在 {{domxref("Node")}} API.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.localName")}}</li> + <li>{{domxref("Node.localName")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/matches/index.html b/files/zh-cn/web/api/element/matches/index.html new file mode 100644 index 0000000000..24d5c682ff --- /dev/null +++ b/files/zh-cn/web/api/element/matches/index.html @@ -0,0 +1,117 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - Element.matches() + - js-30-days + - matches() +translation_of: Web/API/Element/matches +--- +<p>{{APIRef("DOM")}}</p> + +<p>如果元素被指定的选择器字符串选择，<strong><code>Element.matches()</code></strong> 方法返回true; 否则返回false。</p> + +<div class="warning"> +<p>有一些浏览器使用前缀, 在非标准名称 matchesSelector () 下实现了这个方法!</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>let result</em> = <em>element.matches(selectorString);</em> +</pre> + +<ul> + <li><code>result</code> 的值为 <code>true</code> 或 <code>false</code>.</li> + <li><code>selectorString</code> 是个css选择器字符串.</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: html"><code><ul id="birds"> + <li>Orange-winged parrot</li> + <li class="endangered">Philippine eagle</li> + <li>Great white pelican</li> +</ul> + +<script type="text/javascript"> + var birds = document.getElementsByTagName('li'); + + for (var i = 0; i < birds.length; i++) { + if (birds[i].matches('.endangered')) { + console.log('The ' + birds[i].textContent + ' is endangered!'); + } + } +</script></code></pre> + +<pre class="brush: js"> +<div id="foo">This is the element!</div> + <script type="text/javascript"> + var el = document.getElementById("foo"); + if (el.mozMatchesSelector("div")) { + alert("Match!"); + } + </script> +</pre> + +<p>会显示弹出框,因为"div"选择器可以选择到el元素.</p> + +<h2 id="异常">异常</h2> + +<dl> + <dt><code>SYNTAX_ERR</code> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>如果给定的css选择器无效. 在 Gecko 2.0之前,该方法会返回<code>false,2.0之后</code>,会直接抛出异常.</dd> +</dl> + +<h2 id="替代方案(Polyfill)" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">替代方案(Polyfill)</h2> + +<p>对于不支持 <code style="font-style: normal;">Element.matches()</code> 或<code><span style="font-family: consolas,monaco,andale mono,monospace;">Element.matchesSelector()，但支持</span></code><span style="font-family: consolas,monaco,andale mono,monospace;">document.querySelectorAll()方法的</span><code><span style="font-family: consolas,monaco,andale mono,monospace;">浏览器，存在以下替代方案</span></code></p> + +<pre class="brush: js"> +if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.matchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector || + Element.prototype.oMatchesSelector || + Element.prototype.webkitMatchesSelector || + function(s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; +}</pre> + +<blockquote> +<p>关于Polyfill的补充:</p> + +<ul> + <li><a href="http://en.wikipedia.org/wiki/Polyfill">Polyfill Wikipedia</a></li> + <li><a href="http://www.moreonfew.com/what-are-polyfills-in-javascript/">What are Polyfills in Javascript ?</a></li> +</ul> +</blockquote> + +<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</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('Selectors API Level 2', '#matches', 'Element.matches')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.matches")}}</p> diff --git a/files/zh-cn/web/api/element/mousedown_event/index.html b/files/zh-cn/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..fab356445a --- /dev/null +++ b/files/zh-cn/web/api/element/mousedown_event/index.html @@ -0,0 +1,235 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +translation_of: Web/API/Element/mousedown_event +--- +<div>{{APIRef}}</div> + +<p><code>mousedown </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/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</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;">元素（Element）</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">多种：开始 drag/drop 操作；开始文本选择、开始滚动或移动操作（若支持该操作时，可与鼠标中键协同） </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>Boolean</td> + <td>事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>事件是否可取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (文档 <code>window</code>)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td> + <p>短时间内通过连续点击每次加一自增的计数值</p> + </td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>挂载监听器的节点</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>对于 <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> 及 <code>mouseleave</code> 事件： 该事件及其互补事件（如 <code>mouseleave</code> 对应 <code>mouseenter</code> 事件)。不存在时为 <code>null</code> </td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td> + <p>全局屏幕坐标系下鼠标指针的 X 轴坐标值</p> + </td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>全局屏幕坐标系下鼠标指针的 Y 轴坐标值</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td> + <p>当前（DOM 元素）坐标系下鼠标指针的 X 轴坐标值</p> + </td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>当前（DOM 元素）坐标系下鼠标指针的 Y 轴坐标值</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>点击事件对应的按键序号：0 为左键、1 为中键、2 为右键。在左撇子的配置环境下，按键值相反。</p> + </td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>鼠标事件触发时按下的按键值：左键为 1，右键为 2，中键为 4，第四个（如浏览器返回键）为 8，第五个（如浏览器前进键）为 16。若多个按键按下，则返回全部按下按键的逻辑值之和。例如，按下左键和右键时，返回 3 (= 1 | 2)。<a href="/en-US/docs/Web/API/MouseEvent">更多信息</a>。</p> + </td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td> + <p>触发事件时按下触控设备的压力。该值范围最小为 0.0，最大为 1.0</p> + </td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>若事件触发时 control 键按下则为 <code>true</code>，否则为 <code>false</code>。</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>若事件触发时 shift 键按下则为 <code>true</code>，否则为 <code>false</code></td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>若事件触发时 alt 键按下则为 <code>true</code>，否则为 <code>false</code></td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>若事件触发时 meta 键按下则为 <code>true</code>，否则为 <code>false</code></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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]只在{{HTMLElement("textarea")}} 以及某些{{HTMLElement("input")}} 元素上有效.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mouseenter_event/index.html b/files/zh-cn/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..8fd3db245d --- /dev/null +++ b/files/zh-cn/web/api/element/mouseenter_event/index.html @@ -0,0 +1,319 @@ +--- +title: mouseenter +slug: Web/API/Element/mouseenter_event +tags: + - API + - Event + - mouseenter + - 鼠标移入事件 +translation_of: Web/API/Element/mouseenter_event +--- +<div>{{APIRef}}</div> + +<p>当定点设备（通常指鼠标）移动到元素上时就会触发 <code>mouseenter 事件</code></p> + +<p>类似 {{event('mouseover')}}，它们两者之间的差别是 <code>mouseenter </code>不会<a href="/zh-CN/docs/Web/API/Event/bubbles">冒泡</a>（bubble），也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发</p> + +<div style="-moz-column-width: 455px; -webkit-column-width: 455px; column-width: 455px; border: solid 1px; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> +(mouseenter事件)触发时，会向层次结构的每个元素发送一个mouseenter事件。当指针到达文本时，此处将4个事件发送到层次结构的四个元素。 + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> +一个单独的mouseover事件被发送到DOM树的最深层元素，然后它将层次结构向上冒泡，直到它被处理程序取消或到达根目录。</div> + +<p>对于深层次结构，发送的mouseenter事件数量可能非常大并且会导致严重的性能问题。在这种情况下，最好是监听鼠标悬停事件。（可使用chrome开发者工具选项卡中的Performance进行性能测试）</p> + +<p>结合其对称事件, <code>mouseleave</code>, mouseenter DOM事件的行为方式与CSS {{cssxref(':hover')}} 伪类非常相似。.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Synchronicity</dt> + <dd style="margin: 0 0 0 120px;">Synchronous</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properties_属性列表">Properties 属性列表</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>事件(event)目标（DOM树中最顶层的目标）。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件(event)类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>这个事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>这个事件可否取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (document的 <code>window</code> )</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件监听器监听的节点</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>对于 <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> 和 <code>mouseleave</code> 事件: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针相对于屏幕的X轴坐标</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针相对于屏幕的Y轴坐标</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针相对于DOM元素的X轴坐标</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针相对于DOM元素的Y轴坐标</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>始终为0，因为没有按钮会触发这个事件 (mouse movement事件干的).</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>表明当事件触发时鼠标上按下的键: 左键=1, 右键=2, 中键 (鼠标滚轮) =4, 第四个按钮 (通常是 “浏览器返回上一个页面”按钮)=8, 第五个按钮 (通常是“浏览器向前导航”按钮)=16. 如果很多按钮同时按下, 那就返回这些值的逻辑计算值. 比如，当左键和右键同时按下时返回3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">了解更多</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> 代表当事件触发时按着ctrl键. <code>false</code> 反之.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> 代表当事件触发时按着shift键. <code>false</code> 反之.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> 代表当事件触发时按着alt键. <code>false</code> 反之.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> 代表当事件触发时按着meta键 (???) <code>false</code> 反之.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>鼠标悬停( <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code> </a>)文档中有一个示例说明了mouseover和mouseenter之间的区别。</p> + +<p>以下示例说明如何使用mouseover模拟mouseenter事件的事件委派原则。</p> + +<pre class="brush: html"><ul id="test"> + <li> + <ul class="enter-sensitive"> + <li>item 1-1</li> + <li>item 1-2</li> + </ul> + </li> + <li> + <ul class="enter-sensitive"> + <li>item 2-1</li> + <li>item 2-2</li> + </ul> + </li> +</ul> + +<script> + var delegationSelector = ".enter-sensitive"; + + document.getElementById("test").addEventListener("mouseover", function( event ) { + var target = event.target, + related = event.relatedTarget, + match; + + // search for a parent node matching the delegation selector + while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) { + target = target.parentNode; + } + + // exit if no matching node has been found + if ( !match ) { return; } + + // loop through the parent of the related target to make sure that it's not a child of the target + while ( related && related != target && related != document ) { + related = related.parentNode; + } + + // exit if this is the case + if ( related == target ) { return; } + + // the "delegated mouseenter" handler can now be executed + // change the color of the text + target.style.color = "orange"; + // reset the color after a small amount of time + setTimeout(function() { + target.style.color = ""; + }, 500); + + + }, false); + + + // function used to check if a DOM element matches a given selector + // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541 + function matches( elem, selector ){ + // the webkitMatchesSelector is prefixed in most (if not all) browsers + return elem.webkitMatchesSelector( selector ); + }; +</script></pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>10<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} 15.0<br> + 17.0</td> + <td>7<sup>[3]</sup></td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in <a href="https://crbug.com/236215">bug 236215</a>.</p> + +<p>[2] Implemented in {{bug("432698")}}.</p> + +<p>[3] Safari 7 fires the event in many situations where it's not allowed to, making the whole event useless. See <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (it existed in old Chrome versions as well). Safari 8 has correct behavior</p> + +<p>[4] Implemented in {{bug("218093")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mouseleave_event/index.html b/files/zh-cn/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..4469085ca6 --- /dev/null +++ b/files/zh-cn/web/api/element/mouseleave_event/index.html @@ -0,0 +1,325 @@ +--- +title: mouseleave +slug: Web/API/Element/mouseleave_event +translation_of: Web/API/Element/mouseleave_event +--- +<div>{{APIRef}}</div> + +<p class="summary">指点设备（通常是鼠标）的指针移出某个元素时，会触发<code>mouseleave</code>事件。</p> + +<p><code>mouseleave</code> 和 {{event('mouseout')}} 是相似的，但是两者的不同在于<code>mouseleave</code> 不会冒泡而<code>mouseout</code> 会冒泡。<br> + 这意味着当指针离开元素及其所有后代时，会触发<code>mouseleave</code>，而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，会触发<code>mouseout</code>。</p> + +<table class="standard" style="border: solid 1px;"> + <tbody> + <tr> + <td><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></td> + <td><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></td> + </tr> + <tr> + <td>当离开它们时，一个<code>mouseleave</code>事件被发送到层次结构的每个元素。当指针从文本移动到这里表示的最外面的div之外的区域时，这里4个事件会发送到层次结构的四个元素。</td> + <td>一个单一的鼠标事件<code>mouseout</code>被发送到DOM树最深的元素，然后它冒泡层次，直到它被处理程序取消或到达根。</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="一般信息">一般信息</h2> + +<dl> + <dt>规范</dt> + <dd><a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></dd> + <dt>接口</dt> + <dd>{{domxref("MouseEvent")}}</dd> + <dt>是否冒泡</dt> + <dd>否</dd> + <dt>是否可取消</dt> + <dd>否</dd> + <dt>对象</dt> + <dd>Element</dd> + <dt>默认动作</dt> + <dd>无</dd> +</dl> + +<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>事件目标（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>Boolean</td> + <td>事件是否正常冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>事件是否可以取消？</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>附有事件侦听器的节点。</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td><code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> 和 <code>mouseleave</code> 事件: 互补事件的目标(详情查看<a href="/en-US/docs/Web/API/MouseEvent/relatedTarget">relatedTarget</a>)。</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>全局（屏幕）坐标中鼠标指针的X坐标。</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>全局（屏幕）坐标中鼠标指针的Y坐标。</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针在本地（DOM内容）坐标中的X坐标。</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>鼠标指针在本地（DOM内容）坐标中的Y坐标。</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>这总是为0，因为没有按钮按下触发这个事件（鼠标移动触发的事件）。</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>当鼠标事件被触发时按下按键：左按键= 1，右按键= 2，中（轮）按键= 4，第四按键（通常为“浏览器后退”按键）= 8，第五按键（通常为“浏览器前进“按键）= 16。如果按下两个或更多按键，则返回值的逻辑和。例如，如果按下左按键和右按键，返回3（= 1 | 2）。<a href="/en-US/docs/Web/API/MouseEvent">更多信息</a>。</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>生成事件时施加到触摸或tabdevice的压力量;此值介于0.0（最小压力）和1.0（最大压力）之间。</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td> + <p>当事件触发时，Ctrl键是被按下的，则为<code>true</code> ，否则为<code>false</code></p> + </td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件触发时，shift键是被按下的，则为<code>true</code> ，否则为<code>false</code></td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件触发时，alt键是被按下的，则为<code>true</code> ，否则为<code>false</code></td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>当事件触发时，meta键是被按下的，则为<code>true</code> ，否则为<code>false</code></td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseout#Example"><code>mouseout</code> </a>文档有一个例子，说明了<code>mouseout</code>和<code>mouseleave</code>之间的区别。</p> + +<p>以下示例说明了如何使用<code>mouseout</code>来模拟<code>mouseleave</code>事件的事件委托原则。</p> + +<p class="brush: html"> </p> + +<pre class="brush: html"><ul id="test"> + <li> + <ul class="leave-sensitive"> + <li>item 1-1</li> + <li>item 1-2</li> + </ul> + </li> + <li> + <ul class="leave-sensitive"> + <li>item 2-1</li> + <li>item 2-2</li> + </ul> + </li> +</ul> + +<script> + var delegationSelector = ".leave-sensitive"; + + document.getElementById("test").addEventListener("mouseout", function( event ) { + var target = event.target, + related = event.relatedTarget, + match; + + // search for a parent node matching the delegation selector + while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) { + target = target.parentNode; + } + + // exit if no matching node has been found + if ( !match ) { return; } + + // loop through the parent of the related target to make sure that it's not a child of the target + while ( related && related != target && related != document ) { + related = related.parentNode; + } + + // exit if this is the case + if ( related == target ) { return; } + + // the "delegated mouseleave" handler can now be executed + // change the color of the text + target.style.color = "orange"; + // reset the color after a small amount of time + setTimeout(function() { + target.style.color = ""; + }, 500); + + + }, false); + + + // function used to check if a DOM element matches a given selector + // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541 + function matches( elem, selector ) { + if (typeof elem.matchesSelector === "function") { + // the matchesSelector is prefixed in most (if not all) browsers + return elem.matchesSelector( selector ); + } else if (typeof elem.matches === "function") { + return elem.matches( selector ); + } + }; +</script></pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>10<sup>[2]</sup></td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} 15.0<br> + 17.0</td> + <td>7<sup>[3]</sup></td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 实现于 <a href="https://crbug.com/236215">bug 236215</a>.</p> + +<p>[2] 实现于{{bug("432698")}}.</p> + +<p>[3] Safari 7 会在许多不适当的情形下引发该事件,使得这个事件变得无用.详情参阅<a href="https://crbug.com/470258">bug 470258</a> (老版Chrome也有类似问题). Safari 8 已修正.</p> + +<p>[4] 实现于 {{bug("218093")}}.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mousemove_event/index.html b/files/zh-cn/web/api/element/mousemove_event/index.html new file mode 100644 index 0000000000..afc2062ab1 --- /dev/null +++ b/files/zh-cn/web/api/element/mousemove_event/index.html @@ -0,0 +1,163 @@ +--- +title: mousemove +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsSpecTable + - Reference +translation_of: Web/API/Element/mousemove_event +--- +<div>{{APIRef}}</div> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。</font></p> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">事件处理</th> + <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子"><span style="">例子</span></h2> + +<p>下面的例子将使用 {{domxref("Element/mousedown_event", "mousedown")}}, <code>mousemove</code>, and {{domxref("Element/mouseup_event", "mouseup")}} 事件，实现一个允许用户在 HTML5 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a>绘图的功能。这个例子的功能很简单：线的粗细设置为1，颜色始终为黑色。</p> + +<p>当页面加载完成，我们使用变量 <code>myPics</code> 和<code>context</code>分别保存ID为<code>myPics</code>的DOM元素和接下来需要加工的的2d元素。</p> + +<p>当<code>mousedown</code>事件被触发时，绘图也开始了。首先，我们将鼠标的<code>x</code>坐标和<code>y</code>坐标分别赋值给变量<code>x</code>和<code>y</code>，然后设置<code>isDrawing</code>为<code>true</code>。</p> + +<p>当鼠标在页面上移动时，<code>mousemove</code>事件被触发。当<code>isDrawing</code>为true时，事件处理程序将会调用<code>drawLine</code>函数，该函数从变量<code>x</code>和<code>y</code>所指的位置开始，到现在鼠标所在的位置，画一条线。</p> + +<p>当<code>drawLine()</code>调用结束时，我们需要把坐标赋值到<code>x</code>和<code>y</code>中。</p> + +<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置isDra</p> + +<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置<code>isDrawing</code>为false，可以停止绘制。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h1>Drawing with mouse events</h1> +<canvas id="myPics" width="560" height="360"></canvas> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">canvas { + border: 1px solid black; + width: 560px; + height: 360px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">// When true, moving the mouse draws on the canvas +let isDrawing = false; +let x = 0; +let y = 0; + +const myPics = document.getElementById('myPics'); +const context = myPics.getContext('2d'); + +// The x and y offset of the canvas from the edge of the page +const rect = myPics.getBoundingClientRect(); + +// Add the event listeners for mousedown, mousemove, and mouseup +myPics.addEventListener('mousedown', e => { + x = e.clientX - rect.left; + y = e.clientY - rect.top; + isDrawing = true; +}); + +myPics.addEventListener('mousemove', e => { + if (isDrawing === true) { + drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); + x = e.clientX - rect.left; + y = e.clientY - rect.top; + } +}); + +window.addEventListener('mouseup', e => { + if (isDrawing === true) { + drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top); + x = 0; + y = 0; + isDrawing = false; + } +}); + +function drawLine(context, x1, y1, x2, y2) { + context.beginPath(); + context.strokeStyle = 'black'; + context.lineWidth = 1; + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); + context.closePath(); +}</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Examples", 640, 450)}}</p> + +<h2 id="参考">参考</h2> + +<table> + <thead> + <tr> + <th scope="col">gui</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.mousemove_event")}}</p> + +<h2 id="See_also">See also</h2> + +<div> +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> +</div> diff --git a/files/zh-cn/web/api/element/mouseout_event/index.html b/files/zh-cn/web/api/element/mouseout_event/index.html new file mode 100644 index 0000000000..f77a4e8162 --- /dev/null +++ b/files/zh-cn/web/api/element/mouseout_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'Element: mouseout 事件' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouseout + - 事件 + - 参考 + - 接口 +translation_of: Web/API/Element/mouseout_event +--- +<p>当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，<strong><code>mouseout</code></strong> 事件被触发。当指针从一个元素移入其子元素时，<code>mouseout</code> 也会被触发，因为子元素遮盖了父元素的可视区域。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>以下示例将说明如何使用 <code>mouseout</code> 事件。</p> + +<h3 id="mouseout_和_mouseleave">mouseout 和 mouseleave</h3> + +<p>以下示例说明了 <code>mouseout</code> 和 <a href="/en-US/docs/Web/Events/mouseleave" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a> 事件的区别。当鼠标离开<code><ul></code> 时，<code>mouseleave</code> 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。<code>mouseout</code> 在鼠标移出目标元素时被添加到列表，以将目标元素变成橙色。</p> + +<p>当你尝试的时候，你会发现 <code>mouseout</code> 被添加到单个列表项目上，而 <code>mouseleave</code> 则应用于整个列表，这取决于列表项目的层次关系，而列表项目遮盖了底层的 <code><ul></code>。</p> + +<h4 id="HTML">HTML</h4> + +<pre><ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">let test = document.getElementById("test"); + +// 当鼠标移出<ul>元素时，短暂地将列表变成紫色 +test.addEventListener("mouseleave", function( event ) { + // 高亮mouseleave的目标 + event.target.style.color = "purple"; + + // 延迟一秒后重置颜色 + setTimeout(function() { + event.target.style.color = ""; + }, 1000); +}, false); + +// 当鼠标离开<li>元素时，短暂地将其变成橙色 +test.addEventListener("mouseout", function( event ) { + // 高亮mouseout的目标 + event.target.style.color = "orange"; + + // 延迟500ms后重置颜色 + setTimeout(function() { + event.target.style.color = ""; + }, 500); +}, false);</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200" id="frame_mouseout_and_mouseleave" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/mouseout_event$samples/mouseout_and_mouseleave?revision=1552558" width="640"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.mouseout_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mouseup_event/index.html b/files/zh-cn/web/api/element/mouseup_event/index.html new file mode 100644 index 0000000000..cc1669ac37 --- /dev/null +++ b/files/zh-cn/web/api/element/mouseup_event/index.html @@ -0,0 +1,81 @@ +--- +title: mouseup +slug: Web/API/Element/mouseup_event +tags: + - API + - DOM + - Event + - MouseEvent + - Reference + - events + - mouse + - mouseup +translation_of: Web/API/Element/mouseup_event +--- +<div>{{APIRef}}</div> + +<p>当指针在元素中时， <code>mouseup</code>事件在指针设备（如鼠标或触摸板）按钮放开时触发。<code>mouseup</code> 事件与{{domxref("Element.mousedown_event", "mousedown")}} 事件相反。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.mouseup_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/name/index.html b/files/zh-cn/web/api/element/name/index.html new file mode 100644 index 0000000000..935592afff --- /dev/null +++ b/files/zh-cn/web/api/element/name/index.html @@ -0,0 +1,70 @@ +--- +title: Element.name +slug: Web/API/Element/name +translation_of: Web/API +--- +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong>name</strong> 获取或设置一个 DOM 对象的 <code>name</code> 属性；它只能应用于下列元素：{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p>需要注意的是，<code>name</code> 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。</p> +</div> + +<p>Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，<a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 以及 the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // 获取表单中第一个元素的引用 + var formElement = document.forms['formA'].elements[0]; + + // 设置一个 name + formElement.name = 'inputA'; + + // 显示 input 的 value 值 + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>W3C DOM 2 HTML Specification:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/namespaceuri/index.html b/files/zh-cn/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..540f00e9c2 --- /dev/null +++ b/files/zh-cn/web/api/element/namespaceuri/index.html @@ -0,0 +1,115 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +translation_of: Web/API/Element/namespaceURI +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.namespaceURI</strong></code> 是一个只读属性，它返回元素的命名空间，若该元素不在命名空间中则返回<code>null</code> .</p> + +<div class="note"> +<p>在DOM4之前， 这个 API 在接口 {{domxref("Node")}} 中定义 .</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre> + +<h2 id="例子">例子</h2> + +<p>在这段代码中，我们检查了元素的{{domxref("localName")}}和<code>namespaceURI</code>。如果 <code>namespaceURI</code> 返回 XUL 命名空间， <code>localName</code> 返回"browser"，于是这个节点被理解为是一个XUL <code><browser/></code>。</p> + +<pre class="brush:js">if (element.localName == "browser" && + element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // this is a XUL browser +}</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>这不是一个计算值，它是基于范围内的名称空间声明检查的名称空间查找的结果。节点命名空间在节点创建时被冻结。</p> + +<p>在Firefox 3.5 以及之前的版本， HTML文档中的HTML元素的名称空间URI为 <code>null</code>。 在更早的版本中, 符合HTML5， 它是<code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> 如 XHTML。{{gecko_minversion_inline("1.9.2")}}</p> + +<p>您可以使用DOM Level 2方法指定的<code>namespaceURI</code>创建一个元素 <a href="/en-US/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>。</p> + +<p>DOM本身不处理或执行名称空间验证。 它由DOM应用程序完成，以执行任何必要的验证。注意，名称空间前缀一旦与某个特定元素相关联，就不能更改。</p> + +<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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td> + <td>{{Spec2("DOM4")}}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 这API 可以预先在 {{domxref("Node")}} API中获得.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.namespaceURI")}}</li> + <li>{{domxref("Node.namespaceURI")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/onafterscriptexecute/index.html b/files/zh-cn/web/api/element/onafterscriptexecute/index.html new file mode 100644 index 0000000000..f1e976522e --- /dev/null +++ b/files/zh-cn/web/api/element/onafterscriptexecute/index.html @@ -0,0 +1,44 @@ +--- +title: element.onafterscriptexecute +slug: Web/API/Element/onafterscriptexecute +tags: + - DOM + - onafterscriptexecute +translation_of: Web/API/Document/onafterscriptexecute +--- +<div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> + +<h2 id="概述">概述</h2> + +<p>当HTML文档中的{{HTMLElement("script")}}标签内的代码执行完毕时触发该事件,如果这个<code>script</code>标签是用<code>appendChild()</code>等方法动态添加上去的,则不会触发该事件.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em> +</pre> + +<p>当<code>afterscriptexecute</code>事件触发时,<code>funcRef</code>函数就会被调用. 传入参数<code>event</code>的<code>target</code>属性指向触发该事件的那个<code>script</code>元素.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">function finished(e) { + logMessage("Finished script with ID: " + e.target.id); +} + +document.addEventListener("afterscriptexecute", finished, true); +</pre> + +<p><a href="/samples/html/currentScript.html">查看在线演示</a></p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("element.onbeforescriptexecute")}}</li> + <li>{{domxref("document.currentScript")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/onfullscreenchange/index.html b/files/zh-cn/web/api/element/onfullscreenchange/index.html new file mode 100644 index 0000000000..2a2b2416cf --- /dev/null +++ b/files/zh-cn/web/api/element/onfullscreenchange/index.html @@ -0,0 +1,78 @@ +--- +title: Element.onfullscreenchange +slug: Web/API/Element/onfullscreenchange +translation_of: Web/API/Element/onfullscreenchange +--- +<div>元素接口的 <code><strong>onfullscreenchange</strong></code><strong> </strong>属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>targetDocument</em>.onfullscreenchange = <em>fullscreenChangeHandler</em>; +</pre> + +<h3 id="值">值</h3> + +<p>当事件处理程序处于 <code>fullscreenchange </code>模式的时候, 表明游戏元素被改变了或者是退出了全屏模式</p> + +<h2 id="Example">Example</h2> + +<p>本示例建立一个<code>fullscreenchange</code> 处理程序, <code>handleFullscreenChange ()</code>。此函数通过检查 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target" title="A reference to the object that dispatched the event. It is different from event.currentTarget when the event handler is called during the bubbling or capturing phase of the event."><code>event.target</code></a> 的值来确定调用它的元素, 然后将文档的<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement" title="The documentation about this has not yet been written; please consider contributing!"><code>fullscreenElement</code></a> 值与元素进行比较, 以查看它们是否为同一节点。</p> + +<p>这给了我们一个值, 即 <code>isFullscreen</code>, 我们将其传递到一个名为 <code>adjustMyControls()</code> 的函数, 我们想象它是一个函数, 可以对应用的用户界面进行调整, 以便在全屏模式下而不是在窗口。</p> + +<pre class="brush: js">function toggleFullscreen() { + let elem = document.querySelector("video"); + + elem.onfullscreenchange = handleFullscreenChange; + if (!document.fullscreenElement) { + elem.requestFullscreen().then({}).catch(err => { + alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); + }); + } else { + document.exitFullscreen(); + } +} + +function handleFullscreenChange(event) { + let elem = event.target; + let isFullscreen = document.fullscreenElement === elem; + + adjustMyControls(isFullscreen); +} +</pre> + +<p> </p> + +<h2 id="程序规范">程序规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范表达式</th> + <th scope="col">程序状态</th> + <th scope="col">解释</th> + </tr> + <tr> + <td><a href="https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement" hreflang="en" lang="en" rel="noopener">Fullscreen API<br> + <small lang="en-US">The definition of 'Document.fullscreenElement' in that specification.</small></a></td> + <td>Living Standard</td> + <td>初始化定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器适配">浏览器适配</h2> + +<p><a id="ss" name="ss"><em>请切换至英文版本查看<code>浏览器适配统计表</code></em></a></p> + +<p>此页上的兼容性表是由结构化数据生成的。如果您想提供数据, 请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送 <code>pull request</code>。</p> + +<h2 id="其他">其他</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange" title="/en-US/docs/Web/Events/fullscreenchange">fullscreenchange</a></code></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/onfullscreenerror" title="The Element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode."><code>Element.onfullscreenerror</code></a></li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a> equivalent: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onfullscreenchange" title="The Document.onfullscreenchange property is an event handler for the fullscreenchange event that is fired when a document goes in or out of the fullscreen mode."><code>onfullscreenchange</code></a>.</li> +</ul> diff --git a/files/zh-cn/web/api/element/onfullscreenerror/index.html b/files/zh-cn/web/api/element/onfullscreenerror/index.html new file mode 100644 index 0000000000..de9e5353c4 --- /dev/null +++ b/files/zh-cn/web/api/element/onfullscreenerror/index.html @@ -0,0 +1,64 @@ +--- +title: Element.onfullscreenerror +slug: Web/API/Element/onfullscreenerror +translation_of: Web/API/Element/onfullscreenerror +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><span class="seoSummary">{{domxref("Element")}} 接口的 <code><strong>onfullscreenerror</strong></code> 属性是在{{domxref("Element")}} 过渡到或退出全屏模式发生错误后处理事件{{event("fullscreenerror")}}的事件处理程序。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>targetElement</var>.onfullscreenerror = <var>fullscreenErrorHandler</var>; +</pre> + +<h3 id="值">值</h3> + +<p>一个处理事件{{event("fullscreenerror")}}的事件处理程序.</p> + +<h2 id="示例">示例</h2> + +<p>本示例尝试不从用户发起的事件(如点击事件{{event("click")}}或键盘事件{{event("keypress")}})处理程序来触发全屏，由于全屏模式只允许由用户主动输入触发，因此该操作会发生错误，从而导致<span class="seoSummary">{{domxref("Element")}}会</span>触发{{event("fullscreenerror")}}事件传递给错误处理程序</p> + +<pre class="brush: js">let elem = document.querySelector("video")}} + +elem.onfullscreenerror = function ( event ) { + displayWarning("Unable to switch into full-screen mode."); +}; + +//.... + +elem.requestFullscreen();</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Fullscreen", "#dom-element-onfullscreenerror", "onfullscreenerror")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.onfullscreenerror")}}</p> + +<h2 id="其他">其他</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API </a></li> + <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> + <li>{{event("fullscreenerror")}}</li> + <li>{{domxref("Element.onfullscreenchange")}}</li> + <li>{{domxref("Document.onfullscreenerror")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/ongotpointercapture/index.html b/files/zh-cn/web/api/element/ongotpointercapture/index.html new file mode 100644 index 0000000000..da417313c2 --- /dev/null +++ b/files/zh-cn/web/api/element/ongotpointercapture/index.html @@ -0,0 +1,142 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - DOM + - Element + - Event Handler + - Pointer Events + - Property + - Reference + - 事件句柄 + - 元素 + - 属性 + - 引用 + - 指针事件 +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code>ongotpointercapture</code> 是一个{{domxref("Element")}} 接口的{{domxref("EventHandler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var gotCaptureHandler = target.ongotpointercapture; +</pre> + +<h3 id="Return_Value" name="Return_Value">Return value</h3> + +<dl> + <dt><code>gotCaptureHandler</code></dt> + <dd>元素 <code>target</code> 的gotpointercapture 事件句柄。 .</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: js"><html> +<script> +function overHandler(ev) { + // Determine the target event's gotpointercapture handler + var gotCaptureHandler = ev.target.ongotpointercapture; +} +function init() { + var el=document.getElementById("target"); + el.onpointerover = overHandler; +} +</script> +<body onload="init();"> +<div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>无稳定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementation withdrawn. See {{Bug("1166347")}}.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{ event("gotpointercapture") }}</li> +</ul> diff --git a/files/zh-cn/web/api/element/openorclosedshadowroot/index.html b/files/zh-cn/web/api/element/openorclosedshadowroot/index.html new file mode 100644 index 0000000000..145350e232 --- /dev/null +++ b/files/zh-cn/web/api/element/openorclosedshadowroot/index.html @@ -0,0 +1,35 @@ +--- +title: Element.openOrClosedShadowRoot +slug: Web/API/Element/openOrClosedShadowRoot +translation_of: Web/API/Element/openOrClosedShadowRoot +--- +<div>{{APIRef("Shadow DOM")}}{{Draft}}{{non-standard_header}} +<div class="note"><strong>Note:</strong> This API is available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</div> +</div> + +<p><span class="seoSummary"><code>Element.openOrCloseShadowRoot</code> 是一个只读属性。represents the shadow root hosted by the element, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is <code>open</code> or <code>closed</code>.</span> Use {{DOMxRef("Element.attachShadow()")}} to add a shadow root to an existing element.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.shadowRoot; +</pre> + +<h3 id="Value">Value</h3> + +<p>A {{DOMxRef("ShadowRoot")}} object instance, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is set to <code>open</code> or <code>closed</code>, or <code>null</code> if no shadow root is present. (See {{DOMxRef("Element.attachShadow()")}} for further details).</p> + +<h2 id="Specifications">Specifications</h2> + +<p><em>This property is not part of any specification.</em></p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.openOrClosedShadowRoot")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{DOMxRef("Element.shadowRoot")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/outerhtml/index.html b/files/zh-cn/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..ae4983baec --- /dev/null +++ b/files/zh-cn/web/api/element/outerhtml/index.html @@ -0,0 +1,172 @@ +--- +title: element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - 'You Don''t Need jQuery & http://youmightnotneedjquery.com/' + - insertAdjacentHTML + - outerHTML +translation_of: Web/API/Element/outerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<p> {{ domxref("element") }} DOM接口的<code>outerHTML</code>属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。</p> + +<p>要仅获取元素内容的HTML表示形式或替换元素的内容，请使用 {{domxref("Element.innerHTML", "innerHTML")}} 属性</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>let content</em> = <em>element</em>.outerHTML; +</pre> + +<p>返回时，内容包含描述元素及其后代的序列化HTML片段。</p> + +<pre class="eval"><em>element</em>.outerHTML = content; +</pre> + +<p>将元素替换为通过使用元素的父作为片段解析算法的上下文节点解析字符串内容生成的节点。</p> + +<h2 id="Examples" name="Examples">例子</h2> + +<p>获取一个元素的outerHTML属性的值：</p> + +<pre class="brush: js">// HTML: +/* +<div id="d"> + <p>Content</p> + <p>Further Elaborated</p> +</div> +*/ + +const d = document.getElementById("d"); +console.log(d.outerHTML); + +/* + 字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>' + 被显示到控制台窗口 +*/ +</pre> + +<p>通过设置outerHTML属性来替换节点：</p> + +<pre class="brush: js">// HTML: +/* +<div id="container"> + <div id="d">This is a div.</div> +</div> +*/ + +let container = document.getElementById("container"); +let d = document.getElementById("d"); + +console.log(container.firstChild.nodeName); +// logs "div" + +d.outerHTML = "<p>This paragraph replaced the original div.</p>"; + +console.log(container.firstChild.nodeName); +// logs "P" + +/* + #d div不再是文档树的一部分，新段替换了它。 + <em>(不在页面中显示,但仍然在内存中) </em> +*/ +</pre> + +<h2 id="注意事项">注意事项</h2> + +<p>如果元素没有父元素，即如果它是文档的根元素，则设置其outerHTML属性将抛出一个带有错误代码 <strong><em>NO_MODIFICATION_ALLOWED_ERR</em></strong> 的 <code><a href="/zh-cn/DOM/DOMException" title="DOMException">DOMException</a></code> 。例如：</p> + +<pre class="brush: js">document.documentElement.outerHTML = "test"; +// 抛出一个 DOMException +</pre> + +<p>此外，虽然元素将在文档中被替换，设置了outerHTML属性的变量仍将保持对原始元素的引用：</p> + +<pre class="brush: js">let p = document.getElementsByTagName("p")[0]; +console.log(p.nodeName); +// 显示: "P" +p.outerHTML = "<div>This div replaced a paragraph.</div>"; + +console.log(p.nodeName); +// 仍然为: "P"; +</pre> + +<p id="Specification"> </p> + +<h2 id="Specification" name="Specification" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("11") }}</td> + <td>0.2</td> + <td>4.0</td> + <td>7</td> + <td>1.3</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("11") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML 属性</a></li> + <li><a href="http://youmightnotneedjquery.com/" rel="nofollow, noindex">You Don't Need jQuery </a></li> + <li><a href="http://youmightnotneedjquery.com/" rel="nofollow, noindex">http://youmightnotneedjquery.com/</a></li> + <li>insertAdjacentHTML</li> +</ul> diff --git a/files/zh-cn/web/api/element/prefix/index.html b/files/zh-cn/web/api/element/prefix/index.html new file mode 100644 index 0000000000..ac7b60c010 --- /dev/null +++ b/files/zh-cn/web/api/element/prefix/index.html @@ -0,0 +1,112 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +translation_of: Web/API/Element/prefix +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.prefix</strong></code> 只读属性返回指定元素的命名空间前缀，如果未指定前缀，则返回null。</p> + +<div class="note"> +<p>在DOM4之前，该API是在 {{domxref("Node")}} interface 中定义的。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix +</pre> + +<h2 id="Examples">Examples</h2> + +<p>The following logs "x" to the console.</p> + +<pre class="brush:xml"><x:div onclick="console.log(this.prefix)"/> +</pre> + +<h2 id="Notes">Notes</h2> + +<p>This will only work when a namespace-aware parser is used, i.e. when a document is served with an XML MIME type. This will not work for HTML documents.</p> + +<h2 id="Specifications">Specifications</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("DOM4", "#dom-element-prefix", "Element.prefix")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>46.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This API was previously available on the {{domxref("Node")}} API.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Attr.prefix")}}</li> + <li>{{domxref("Node.prefix")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/queryselector/index.html b/files/zh-cn/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..340fd3b9b1 --- /dev/null +++ b/files/zh-cn/web/api/element/queryselector/index.html @@ -0,0 +1,132 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +tags: + - Element.querySelector() +translation_of: Web/API/Element/querySelector +--- +<div>{{APIRef("DOM")}}</div> + +<div>返回与指定的选择器组匹配的元素的后代的第一个元素。</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush:js"><var>element</var> = baseElement.querySelector(<em>selector</em>s); +</pre> + +<ul> + <li><code>element</code> 和 <code>baseElement</code> 是 {{domxref("element")}} 对象.</li> + <li><code>selectors</code> 是一个CSS选择器字符串( <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> )</li> +</ul> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>一组用来匹配{{domxref("Element")}} <code>baseElement</code>后代元素的选择器<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。</p> + +<p>如果没有找到匹配项，返回值为null。</p> + +<h3 id="异常">异常</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>指定的选择器无效。</dd> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<p>我们来看几个例子。</p> + +<h3 id="查找一个具有特殊属性值的元素">查找一个具有特殊属性值的元素</h3> + +<p>在第一个例子中，会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的{{HTMLElement("style")}}元素:</p> + +<pre class="brush:js">let el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="整个层次结构有效">整个层次结构有效</h3> + +<p>下面的例子演示了在应用选择器时考虑整个文档的层次结构, 因此在定位匹配时仍然考虑指定的 <strong>baseElement</strong> 之外的级别。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <h5>Original content</h5> + <p> + inside paragraph + <span>inside span</span> + inside paragraph + </p> +</div> +<div> + <h5>Output</h5> + <div id="output"></div> +</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush:js">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="结果">结果</h4> + +<p>结果是像这样的:</p> + +<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> + +<p>注意，尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素，选择器"<code>div span</code>"依旧匹配了其中的{{HTMLElement("span")}}元素。 </p> + +<h3 id="更多例子">更多例子</h3> + +<p> {{domxref("Document.querySelector()")}} 查看更多正确格式选择器的例子。</p> + +<h2 id="Notes" name="Notes">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.querySelector")}}</p> + +<h2 id="Specification" name="Specification">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/queryselectorall/index.html b/files/zh-cn/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..d432c28ed2 --- /dev/null +++ b/files/zh-cn/web/api/element/queryselectorall/index.html @@ -0,0 +1,135 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +translation_of: Web/API/Element/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>返回一个non-live的<code><a href="NodeList" title="zh-cn/DOM/NodeList">NodeList</a></code>, 它包含所有元素的非活动节点，该元素来自与其匹配指定的CSS选择器组的元素。(基础元素本身不包括，即使它匹配。)</p> + +<div class="note"> +<p>注意：该API的定义已被移动到 {{domxref("ParentNode")}} 接口。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>); +</pre> + +<p>其中</p> + +<ul> + <li><code>elementList</code>会是一个non-live的<code><a href="NodeList" title="zh-cn/DOM/NodeList">NodeList</a></code>对象.</li> + <li><code>baseElement是一个</code><a href="/zh-CN/docs/DOM/element" title="DOM/element">元素</a>对象.</li> + <li><code>selectors</code>是一组CSS选择器.</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="dataset_selector_attribute_selectors">dataset selector & attribute selectors</h3> + +<pre class="brush: html"><section class="box" id="sect1"> + <div class="funnel-chart-percent1">10.900%</div> + <div class="funnel-chart-percent2">3700.00%</div> + <div class="funnel-chart-percent3">0.00%</div> +</section> +</pre> + +<pre class="brush: js">// dataset selectors +const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)]; + +// attribute selectors +// const refs = [...document.querySelectorAll(`[class*="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)]; +// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)]; +</pre> + +<p>下面的例子返回了HTML文档中的<code>body</code>元素的所有<code><code>p</code>后代</code>元素:</p> + +<pre class="brush: js">var matches = document.body.querySelectorAll('p'); +</pre> + +<p>下面的例子返回了<code>id</code>为<code>'test</code>'的元素的所有<code>class属性</code>为'<code>highlighted</code>'的所有div后代元素的<code>p</code>子元素:</p> + +<pre class="brush:js">var el = document.querySelector('#test'); +var matches = el.querySelectorAll('div.highlighted > p'); +</pre> + +<p>下面的例子返回了el元素的后代元素中所有拥有<code>data-src</code>属性的<code>iframe</code>元素:</p> + +<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]'); +</pre> + +<h2 id="Notes" name="Notes">附注</h2> + +<p>如果指定的CSS选择器不合法,则会抛出一个<code>SYNTAX_ERR</code> 异常.</p> + +<p>返回值是一个<code>NodeList</code>对象,所以不推荐使用 for...in去遍历它(会遍历出其他无关属性)</p> + +<p>想要在它身上使用数组方法,必须先把它转换为真正的数组.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<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</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">选择器API</a></li> +</ul> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{Domxref("Element.querySelector")}}</li> + <li><a href="/zh-CN/docs/Web/API/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/zh-CN/docs/Web/API/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/zh-CN/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/element/removeattribute/index.html b/files/zh-cn/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..92a3d3844b --- /dev/null +++ b/files/zh-cn/web/api/element/removeattribute/index.html @@ -0,0 +1,54 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - 属性 + - 方法 +translation_of: Web/API/Element/removeAttribute +--- +<p>{{ APIRef("DOM") }}</p> + +<p><span class="seoSummary">{{domxref("Element", "元素")}}方法 <code><strong>removeAttribute()</strong></code> 从指定的元素中删除一个属性。</span></p> + +<h3 id="语法">语法</h3> + +<pre class="syntaxbox notranslate"><em>element</em>.removeAttribute(<em>attrName</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">属性名</span></font></dt> + <dd>{{domxref("DOMString")}}指定要从元素中移除的属性的名称。如果指定的属性不存在，则removeAttribute()返回，但不会生成错误。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>IE 返回boolean类型值，其他返回undefined</p> + +<div class="note"> +<p><strong>注意：</strong>因为 <code>removeAttribute()</code> 不会返回任何有效值，你不能使用链式方法（连续使用方法，例如 <code>document.body.removeAttribute("first").removeAttribute("second")…</code>）连续移除多个属性。</p> +</div> + +<h2 id="Notes" name="Notes">使用说明</h2> + +<p>若要彻底移除一个属性的效果，应当使用 <code>removeAttribute()</code>，而不是使用 {{domxref("Element.setAttribute", "setAttribute()")}} 将属性值设置为 <code>null</code>。对于许多属性，如果仅将其值设为 <code>null</code>，这不会造达成和预期一样的效果。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js notranslate">// Given: <div id="div1" align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// Now: <div id="div1" width="200px"> +</pre> + +<h2 id="规范">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.removeAttribute")}}</p> diff --git a/files/zh-cn/web/api/element/removeattributenode/index.html b/files/zh-cn/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..aa4f31a331 --- /dev/null +++ b/files/zh-cn/web/api/element/removeattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: Element.removeAttributeNode() +slug: Web/API/Element/removeAttributeNode +translation_of: Web/API/Element/removeAttributeNode +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttributeNode</code> 从当前的 element(元素节点) 删除指定的属性</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>removedAttr</em> = <em>element</em>.removeAttributeNode(<em>attributeNode</em>) +</pre> + +<ul> + <li><code>attributeNode</code> 是需要被删除的 Attr 节点。</li> + <li><code>removedAttr</code> 是被删除了的 Attr 节点。</li> +</ul> + +<h2 id="Example" name="Example">例如</h2> + +<pre>// <div id="top" align="center" /> +var d = document.getElementById("top"); +// getAttributeNode 返回指定元素的指定属性， 返回值是 Attr 节点类型 +var d_align = d.getAttributeNode("align"); +d.removeAttributeNode(d_align); +// 现在 align 被删除了: <div id="top" /> +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>如果删除有默认值的属性，相当于将属性值替换为默认值。属性只有在具有同样的命名空间、本地名称以及原始前缀时，才会在被删除的时候替换为默认值。</p> + +<p>不像 setAttributeNode 和 setAttributeNodeNS 配对使用那样，需要知道要替换哪个现有属性。removeAttributeNode 没有那样的要求，也没有 removeAttributeNodeNS。removeAttributeNode可以删除命名空间以及非命名空间的属性。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core: removeAttributeNode</a> (<a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttributeNode">DOM Level 1 Core</a> 里面的介绍)</p> diff --git a/files/zh-cn/web/api/element/removeattributens/index.html b/files/zh-cn/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..f1c35b27fd --- /dev/null +++ b/files/zh-cn/web/api/element/removeattributens/index.html @@ -0,0 +1,37 @@ +--- +title: Element.removeAttributeNS() +slug: Web/API/Element/removeAttributeNS +translation_of: Web/API/Element/removeAttributeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>removeAttributeNS</code> 移除元素的指定属性</p> + +<p>{{ Fx_minversion_inline(3) }} 在Firefox 3及更高版本中，此方法会将DOM值重置为其默认值。</p> + +<h2 id="Syntax" name="Syntax">用法</h2> + +<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>); +</pre> + +<ul> + <li><code>namespace</code> 包含当前属性的namespace字符串</li> + <li><code>attrName</code> 当前移除的属性名字符串</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre>// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" +// special:specialAlign="utterleft" width="200px" /> +d = document.getElementById("div1"); +d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); +// now: <div id="div1" width="200px" /> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS</a></p> diff --git a/files/zh-cn/web/api/element/requestfullscreen/index.html b/files/zh-cn/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..045a760246 --- /dev/null +++ b/files/zh-cn/web/api/element/requestfullscreen/index.html @@ -0,0 +1,177 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +<div>{{APIRef("Fullscreen API")}}</div> + +<p><code><strong>Element.requestFullscreen()</strong></code> 方法用于发出异步请求使元素进入全屏模式。</p> + +<p>调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的{{JSxRef("Promise")}}会resolve，并且该元素会收到一个{{event("fullscreenchange")}}事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个{{Event('fullscreenerror')}}事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。</p> + +<p>早期的Fullscreen API实现总是会把这些事件发送给document，而不是调用的元素，所以你自己可能需要处理这样的情况。参考 {{SectionOnPage("/zh-CN/docs/Web/Events/fullscreen", "Browser compatibility")}} 来得知哪些浏览器做了这个改动。</p> + +<div class="note"> +<p>注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>var Promise = Element</em>.requestFullscreen(options); +</pre> + +<h3 id="参数">参数</h3> + +<p><code>options</code> {{optional_inline}}</p> + +<p>一个{{domxref("FullscreenOptions")}}对象提供切换到全屏模式的控制选项。目前，唯一的选项是{{domxref("FullscreenOptions.navigationUI", "navigationUI")}}，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是<code>"auto"</code>，表明这将由浏览器来决定是否显示导航条。</p> + +<h3 id="返回值">返回值</h3> + +<p>在完成切换全屏模式后，返回一个已经用值 <code>undefined</code> resolved的{{JSxRef("Promise")}}</p> + +<h3 id="异常">异常</h3> + +<p><em><code>requestFullscreen()</code> </em><em>通过拒绝返回的 <code>Promise</code>来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：</em></p> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>在以下几种情况下，会抛出<code>TypeError</code>：</dd> +</dl> + +<ul> + <li>文档中包含的元素未完全激活，也就是说不是当前活动的元素。</li> + <li>元素不在文档之内。</li> + <li>因为功能策略限制配置或其他访问控制，元素不被允许使用<code>"fullscreen"</code>功能。</li> + <li>元素和它的文档是同一个节点。 </li> +</ul> + +<dl> +</dl> + +<h2 id="示例">示例</h2> + +<p>在调用<code>requestFullScreen()之前，可以对</code>{{event("fullscreenchange")}} 和 {{event("fullscreenerror")}}事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通知。</p> + +<h2 id="API规格">API规格</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("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</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>Edge</th> + <th>Firefox</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>11{{property_prefix("ms")}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br> + {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 同样以<code>webkitRequestFullScreen方法实现。</code></p> + +<p>[2] 使用带有浏览器前缀的<code>mozRequestFullScreen方法实现。在火狐44之前版本，Gecko浏览器内核错误地允许frame里面元素以及object元素进入全屏模式。而在之后的版本，这个漏洞被修复：仅允许位于顶部文档（top-level document）的元素，以及拥有</code>{{htmlattrxref("allowfullscreen", "iframe")}}属性的iframe的内部元素进入全屏显示。. </p> + +<p>[3] 使用IE时，最后的screen的s为小写，也即ms<code>RequestFullscreen，否则无效</code></p> + +<p>[4] 谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法</p> + +<p>[5]将浏览器前缀兼容封装成函数</p> + +<pre>function toFullVideo(){ + + if(videoDom.requestFullscreen){ + + return videoDom.requestFullscreen(); + + }else if(videoDom.webkitRequestFullScreen){ + + return videoDom.webkitRequestFullScreen(); + + }else if(videoDom.mozRequestFullScreen){ + + return videoDom.mozRequestFullScreen(); + + }else{ + + return videoDom.msRequestFullscreen(); + + } + +}</pre> + +<p>[6] 详见 <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentation on MSDN</a>.</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/zh-cn/web/api/element/requestpointerlock/index.html b/files/zh-cn/web/api/element/requestpointerlock/index.html new file mode 100644 index 0000000000..c5b6c49d75 --- /dev/null +++ b/files/zh-cn/web/api/element/requestpointerlock/index.html @@ -0,0 +1,48 @@ +--- +title: Element.requestPointerLock() +slug: Web/API/Element/requestPointerLock +translation_of: Web/API/Element/requestPointerLock +--- +<div>{{ APIRef("DOM") }}{{ seeCompatTable }}</div> + +<p><strong><code>Element.requestPointerLock()</code></strong> 方法允许您异步地请求将鼠标指针锁定在指定元素上。</p> + +<p>若想追踪请求成功还是失败，则需要在 {{domxref("Document")}} 级别监听 {{event("pointerlockchange")}} 和 {{event("pointerlockerror")}} 事件。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>instanceOfElement</em>.requestPointerLock(); +</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('Pointer Lock','#dom-element-requestpointerlock','requestPointerLock()')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.Element.requestPointerLock")}}</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{ domxref("Document.pointerLockElement") }}</li> + <li>{{ domxref("Document.exitPointerLock()") }}</li> + <li><a href="/Web/API/Pointer_Lock_API">Pointer Lock</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/runtimestyle/index.html b/files/zh-cn/web/api/element/runtimestyle/index.html new file mode 100644 index 0000000000..c1537864af --- /dev/null +++ b/files/zh-cn/web/api/element/runtimestyle/index.html @@ -0,0 +1,76 @@ +--- +title: Element.runtimeStyle +slug: Web/API/Element/runtimeStyle +translation_of: Web/API/Element/runtimeStyle +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="概要">概要</h2> + +<p><span class="seoSummary"><strong><code>Element.runtimeStyle</code> </strong>是一个元素专有属性，和 {{domxref("HTMLElement.style")}} 相似，除了其中的样式属性外<strong>，</strong>{{domxref("HTMLElement.style")}} 具有更高的优先级和修改能力。<strong><code>runtimeStyle</code> </strong></span>不能修改 <code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> 中的<code>content</code>属性，其<span class="seoSummary">在旧版的IE浏览器上可用。</span></p> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范的一部分。</p> + +<p>微软对此有一篇<a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">描述文档</a> <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">has a description on MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>基本支持</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element.currentStyle")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/scroll/index.html b/files/zh-cn/web/api/element/scroll/index.html new file mode 100644 index 0000000000..69e3f5f738 --- /dev/null +++ b/files/zh-cn/web/api/element/scroll/index.html @@ -0,0 +1,68 @@ +--- +title: Element.scroll() +slug: Web/API/Element/scroll +translation_of: Web/API/Element/scroll +--- +<div>{{APIRef}}</div> + +<p> <strong><code>scroll()</code></strong> 方法是用于在给定的元素中滚动到某个特定坐标的 {{domxref("Element")}} 接口。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.scroll(<em>x-coord</em>, <em>y-coord</em>) +element.scroll(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>x-coord</code> 是指在元素左上方区域横轴方向上想要显示的像素。</li> + <li><code>y-coord</code> 是指在元素左上方区域纵轴方向上想要显示的像素。</li> +</ul> + +<p>- or -</p> + +<ul> + <li><code>options</code> 是一个 {{domxref("ScrollToOptions")}} 的字典。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">// 在元素上方显示1000像素 +element.scroll(0, 1000); +</pre> + +<p>使用 <code>options</code>:</p> + +<pre class="brush: js">element.scroll({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Specification" name="Specification">规范</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('CSSOM View', '#dom-element-scroll-options-options', 'element.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> + <p>Initial definition.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.scroll")}}</p> diff --git a/files/zh-cn/web/api/element/scrollby/index.html b/files/zh-cn/web/api/element/scrollby/index.html new file mode 100644 index 0000000000..1bad7f7a56 --- /dev/null +++ b/files/zh-cn/web/api/element/scrollby/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollBy() +slug: Web/API/Element/scrollBy +tags: + - API + - Element + - Method + - Reference + - scrollBy +translation_of: Web/API/Element/scrollBy +--- +<div>{{ APIRef() }}</div> + +<p> <strong><code>scrollBy()</code></strong> 方法是使得元素滚动一段特定距离的 {{domxref("Element")}} 接口。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.scrollBy(<em>x-coord</em>, <em>y-coord</em>); +element.scrollBy(options) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<ul> + <li><code>x-coord</code> 是元素要在横轴上滚动的距离。</li> + <li><code>y-coord</code> 是元素要在纵轴上滚动的距离。</li> +</ul> + +<p>- or -</p> + +<ul> + <li><code>options</code> 是一个 {{domxref("ScrollToOptions")}} 字典。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">// 让元素滚动 +element.scrollBy(300, 300); +</pre> + +<p>使用 <code>options</code>:</p> + +<pre class="brush: js">element.scrollBy({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<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('CSSOM View', '#dom-element-scrollby-options-options', 'element.scrollBy()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"> 浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.scrollBy")}}</p> diff --git a/files/zh-cn/web/api/element/scrollheight/index.html b/files/zh-cn/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..da70cb9bea --- /dev/null +++ b/files/zh-cn/web/api/element/scrollheight/index.html @@ -0,0 +1,154 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API +translation_of: Web/API/Element/scrollHeight +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Element.scrollHeight</code></strong> 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。</p> + +<p><code>scrollHeight </code>的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值{{domxref("Element.clientHeight", "clientHeight")}}相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 {{cssxref("::before")}} 和 {{cssxref("::after")}}这样的伪元素。</p> + +<div class="note"> +<p>属性将会对值四舍五入取整。如果需要小数值，使用<span style="line-height: 1.5;">{{ domxref("Element.getBoundingClientRect()") }}.</span></p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight; +</pre> + +<p><em>intElemScrollHeight</em><span style="line-height: 1.5;"> 存储着与元素scrollHeight像素值对应的一个整数。scrollHeight是一个只读属性。</span></p> + +<h2 id="Example" name="Example">示例</h2> + +<div id="offsetContainer" style="margin: 26px 0px; border: 4px dashed black; left: 260px; color: black; position: absolute; background-color: rgb(255, 255, 204);"> +<div id="idDiv" style="margin: 24px 29px; padding: 0px 28px; border: 24px solid black; width: 199px; height: 102px; overflow: auto; font-family: Arial, sans-serif; font-size: 13px !important; background-color: white;"> +<p id="PaddingTopLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/44/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="margin: 0px; text-align: center; font-family: Arial, sans-serif; font-size: 13px !important; font-style: italic; font-weight: bold;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px !important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p> + +<h2 id="问题与解决方案">问题与解决方案</h2> + +<h3 id="判定元素是否滚动到底">判定元素是否滚动到底</h3> + +<p>如果元素滚动到底，下面等式返回true，没有则返回false.</p> + +<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight +</pre> + +<p>当容器不滚动但有溢出的子容器时，这些检查可以确定容器能否滚动：</p> + +<pre>window.getComputedStyle(element).overflowY === 'visible' window.getComputedStyle(element).overflowY !== 'hidden' +</pre> + +<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight 演示</h2> + +<p>监听 <code><a href="/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code> 事件，这个等式可以用来判定用户是否阅读过文本。（参考<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;"><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>属性）。例如： </p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" name="accept" id="agree" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} + +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} + +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +}</pre> + +<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p> + +<h2 id="Specification" name="Specification" style="line-height: 30px;">说明</h2> + +<p><code>scrollHeight</code> MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> 对象模型的一部分. <code>scrollHeight</code> 是以下说明的一部分。: {{SpecName("CSSOM View")}}.</p> + +<h2 id="Supported" name="Supported">浏览器兼容性</h2> + +<p>{{Compat("api.Element.scrollHeight")}}</p> + +<h2 id="See_Also" name="See_Also">参考资料</h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.offsetHeight")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollintoview/index.html b/files/zh-cn/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..3cba87dabf --- /dev/null +++ b/files/zh-cn/web/api/element/scrollintoview/index.html @@ -0,0 +1,78 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +<div>{{APIRef("DOM")}}</div> + +<div><span class="seoSummary">{{domxref("Element")}} </span>接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">element.scrollIntoView(); // 等同于element.scrollIntoView(true) +element.scrollIntoView(alignToTop); // Boolean型参数 +element.scrollIntoView(scrollIntoViewOptions); // Object型参数</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>alignToTop</code>{{optional_inline}}</dt> + <dd>一个{{jsxref("Boolean")}}值： + <ul> + <li>如果为<code>true</code>，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>。这是这个参数的默认值。</li> + <li>如果为<code>false</code>，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的<code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>。</li> + </ul> + </dd> + <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt> + <dd>一个包含下列属性的对象：</dd> + <dd> + <dl> + <dt><code>behavior</code> {{optional_inline}}</dt> + <dd>定义动画过渡效果， <code>"auto"</code>或 <code>"smooth"</code> 之一。默认为 <code>"auto"</code>。</dd> + <dt><code>block</code> {{optional_inline}}</dt> + <dd>定义垂直方向的对齐， <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, 或 <code>"nearest"</code>之一。默认为 <code>"start"</code>。</dd> + <dt><code>inline</code> {{optional_inline}}</dt> + <dd>定义水平方向的对齐， <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, 或 <code>"nearest"</code>之一。默认为 <code>"nearest"</code>。</dd> + </dl> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="notranslate"><code>var element = document.getElementById("box"); + +element.scrollIntoView(); +element.scrollIntoView(false); +element.scrollIntoView({block: "end"}); +element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});</code></pre> + +<h2 id="注意">注意</h2> + +<p>取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.scrollIntoView")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollintoviewifneeded/index.html b/files/zh-cn/web/api/element/scrollintoviewifneeded/index.html new file mode 100644 index 0000000000..dd419a7d6d --- /dev/null +++ b/files/zh-cn/web/api/element/scrollintoviewifneeded/index.html @@ -0,0 +1,56 @@ +--- +title: Element.scrollIntoViewIfNeeded() +slug: Web/API/Element/scrollIntoViewIfNeeded +tags: + - API + - DOM + - 可视区域 + - 方法 + - 滚动 + - 非标准 +translation_of: Web/API/Element/scrollIntoViewIfNeeded +--- +<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> + +<p><code><strong>Element.scrollIntoViewIfNeeded()</strong></code>方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的<a href="/zh-CN/docs/Web/API/Element/scrollIntoView">Element.scrollIntoView()</a>方法的专有变体。</p> + +<h2 id="语法">语法</h2> + +<pre>element.scrollIntoViewIfNeeded(); // 等同于element.scrollIntoViewIfNeeded(true) +element.scrollIntoViewIfNeeded(true); +element.scrollIntoViewIfNeeded(false); </pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em><code>opt_center</code></em></dt> + <dd>一个 {{jsxref("Boolean")}} 类型的值，默认为<code>true</code>: + <ul> + <li>如果为true，则元素将在其所在滚动区的可视区域中居中对齐。</li> + <li>如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。</li> + </ul> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre>var element = document.getElementById("child"); + +element.scrollIntoViewIfNeeded(); +element.scrollIntoViewIfNeeded(true); +element.scrollIntoViewIfNeeded(false); +</pre> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范，是一种WebKit专有的方法。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{Compat("api.Element.scrollIntoViewIfNeeded")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152: Support centering an element when scrolling into view.</a> (一个等同于 scrollIntoViewIfNeeded 的标准功能特性)</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollleft/index.html b/files/zh-cn/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..98fd329358 --- /dev/null +++ b/files/zh-cn/web/api/element/scrollleft/index.html @@ -0,0 +1,102 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Element.scrollLeft</code></strong> 属性可以读取或设置元素滚动条到元素左边的距离。</p> + +<p>注意如果这个元素的内容排列方向（{{cssxref("direction")}}） 是<code>rtl</code> (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且<code>scrollLeft</code>值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。</p> + +<div class="blockIndicator warning"> +<p>在使用显示比例缩放的系统上，<code>scrollLeft</code> 可能会是一个小数。</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre class="eval">//获取滚动条到元素左边的距离 +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> + +<p><code>sLeft</code>是一个整数，代表元素滚动条距离元素左边多少像素。</p> + +<pre class="eval">//设置滚动条滚动了多少像素 +<var>element</var>.scrollLeft = 10; +</pre> + +<p><code>scrollLeft</code> 可以是任意整数，然而：</p> + +<ul> + <li>如果元素不能滚动（比如：元素没有溢出），那么<code>scrollLeft</code> 的值是0。</li> + <li>如果给<code>scrollLeft</code> 设置的值小于0，那么<code>scrollLeft</code> 的值将变为0。</li> + <li>如果给<code>scrollLeft</code> 设置的值大于元素内容最大宽度，那么<code>scrollLeft</code> 的值将被设为元素最大宽度。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"> + <div id="content">Click the button to slide right!</div> +</div> + +<button id="slide" type="button">Slide right</button></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#container { + width: 100px; + height: 100px; + border: 1px solid #ccc; + overflow-x: scroll; +} + +#content { + width: 250px; + background-color: #ccc; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const button = document.getElementById('slide'); + +button.onclick = function () { + document.getElementById('container').scrollLeft += 20; +};</pre> + +<h3 id="结构">结构</h3> + +<p>{{EmbedLiveSample("示例")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("api.Element.scrollLeft")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> + <li>{{domxref("Element.scrollTop")}}</li> + <li>{{domxref("Element.scrollTo()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollleftmax/index.html b/files/zh-cn/web/api/element/scrollleftmax/index.html new file mode 100644 index 0000000000..89a30f783d --- /dev/null +++ b/files/zh-cn/web/api/element/scrollleftmax/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollLeftMax +slug: Web/API/Element/scrollLeftMax +translation_of: Web/API/Element/scrollLeftMax +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}}</p> + +<p>这个 <code><strong>Element.scrollLeftMax</strong></code> 是只读的属性返回一个 {{jsxref("Number")}} 表示一个元素横向滚动条可滚动的最大距离。</p> + +<h2 id="语法">语法</h2> + +<pre>var <em>pxl</em> = <em>elt</em>.scrollLeftMax;</pre> + +<h2 id="规范">规范</h2> + +<p><em>这个属性还没纳入规范.</em></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{domxref("Element.scrollTopMax")}} 纵坐标用法相同.</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollto/index.html b/files/zh-cn/web/api/element/scrollto/index.html new file mode 100644 index 0000000000..19f369bd0b --- /dev/null +++ b/files/zh-cn/web/api/element/scrollto/index.html @@ -0,0 +1,77 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +tags: + - API + - Element + - Method + - Reference + - scrollTo +translation_of: Web/API/Element/scrollTo +--- +<div>{{ APIRef }}<br> +{{domxref("Element")}} 的<code><strong>scrollTo()</strong></code><strong> </strong>方法可以使界面滚动到给定元素的指定坐标位置。</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>) +element.scrollTo(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>x-coord</code> 是期望滚动到位置水平轴上距元素左上角的像素。</li> + <li><code>y-coord</code> 是期望滚动到位置竖直轴上距元素左上角的像素。</li> +</ul> + +<p>- or -</p> + +<ul> + <li><code>options</code> 是一个{{domxref("ScrollToOptions")}}对象。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">element.scrollTo(0, 1000); +</pre> + +<p>使用 <code>options</code>:</p> + +<pre class="brush: js">element.scrollTo({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Specifications" name="Specifications">规范</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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.scrollTo")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li> + <li>{{domxref("Window.scrollTo()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrolltop/index.html b/files/zh-cn/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..9a4bfbd1ca --- /dev/null +++ b/files/zh-cn/web/api/element/scrolltop/index.html @@ -0,0 +1,82 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Property + - Scroll + - scrollTop +translation_of: Web/API/Element/scrollTop +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Element.scrollTop</strong></code> 属性可以获取或设置一个元素的内容垂直滚动的像素数。</p> + +<p>一个元素的 <code>scrollTop</code> 值是这个元素的<strong>内容顶部</strong>（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 <code>scrollTop</code> 值为<code>0</code>。</p> + +<div class="blockIndicator warning"> +<p>在使用显示比例缩放的系统上，<code>scrollTop</code>可能会提供一个小数。</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre class="eval">// 获得滚动的像素数 +var <var> intElemScrollTop</var> = someElement.scrollTop; +</pre> + +<p>运行此代码后， <code><var>intElemScrollTop</var></code> 是一个整数，即{{domxref("element")}}的内容向上滚动的像素数。</p> + +<pre class="eval">// 设置滚动的距离 +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><code>scrollTop</code> 可以被设置为任何整数值，同时注意：</p> + +<ul> + <li>如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"<strong>non-scrollable"</strong>属性）， <code>scrollTop</code>将被设置为<code>0</code>。</li> + <li>设置<code>scrollTop</code>的值小于0，<code>scrollTop</code> 被设为<code>0</code></li> + <li>如果设置了超出这个容器可滚动的值, <code>scrollTop</code> 会被设为最大值。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + +<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("api.Element.scrollTop")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li> + <li>{{domxref("Element.scrollLeft")}}</li> + <li>{{domxref("Element.scrollTo()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrolltopmax/index.html b/files/zh-cn/web/api/element/scrolltopmax/index.html new file mode 100644 index 0000000000..a9b4cbe64d --- /dev/null +++ b/files/zh-cn/web/api/element/scrolltopmax/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollTopMax +slug: Web/API/Element/scrollTopMax +translation_of: Web/API/Element/scrollTopMax +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}}</p> + +<p><code><strong>Element.scrollTopMax 返回一个只读Number表示元素所能滚动的最大高度</strong></code></p> + +<h2 id="语法">语法</h2> + +<pre>var <em>pxl</em> = <em>elt</em>.scrollTopMax;</pre> + +<h2 id="规范">规范</h2> + +<p>此属性不在当前规范中</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile(16) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.scrollLeftMax")}} giving the same information for the other axis.</li> +</ul> diff --git a/files/zh-cn/web/api/element/scrollwidth/index.html b/files/zh-cn/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..fd712b9204 --- /dev/null +++ b/files/zh-cn/web/api/element/scrollwidth/index.html @@ -0,0 +1,106 @@ +--- +title: Element.scrollWidth +slug: Web/API/element/scrollWidth +tags: + - 元素属性 +translation_of: Web/API/Element/scrollWidth +--- +<div>{{ APIRef("DOM") }}</div> + +<div><strong><code>Element.scrollWidth</code></strong> 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。</div> + +<div></div> + +<p><code>scrollWidth</code>值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与{{domxref("Element.clientWidth", "clientWidth")}}相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如{{cssxref("::before")}}或{{cssxref("::after")}}。 如果元素的内容可以适合而不需要水平滚动条，则其<code>scrollWidth</code>等于{{domxref("Element.clientWidth", "clientWidth")}}</p> + +<div class="note"> +<p>1. 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用{{ domxref("element.getBoundingClientRect()") }}<em>.</em></p> + +<p><em>2. 在实际测试过程中，谷歌获取的 </em><strong><code>Element.scrollWidth</code></strong> 和 IE，火狐下获取的 <strong><code>Element.scrollWidth</code></strong> 并不相同</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth; +</pre> + +<p>xScrollWidth 的值是元素的内容宽度。</p> + +<h2 id="Example" name="Example">例子</h2> + +<pre><code><!DOCTYPE html> +<html> +<head> + <title>Example</title> + <style> + div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #aDiv { + width: 100px; + } + + button { + margin-bottom: 2em; + } + </style> +</head> + +<body> + <div id="aDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="aButton"> + Check for overflow + </button> + + <div id="anotherDiv"> + FooBar-FooBar-FooBar-FooBar + </div> + <button id="anotherButton"> + Check for overflow + </button> +</body> +<script> + var buttonOne = document.getElementById('aButton'), + buttonTwo = document.getElementById('anotherButton'), + divOne = document.getElementById('aDiv'), + divTwo = document.getElementById('anotherDiv'); + + //check to determine if an overflow is happening + function isOverflowing(element) { + return (element.scrollWidth > element.offsetWidth); + } + + function alertOverflow(element) { + if (isOverflowing(element)) { + alert('Contents are overflowing the container.'); + } else { + alert('No overflows!'); + } + } + + buttonOne.addEventListener('click', function() { + alertOverflow(divOne); + }); + + buttonTwo.addEventListener('click', function() { + alertOverflow(divTwo); + }); +</script> +</html></code></pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>The <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> defines <code>scrollWidth</code></p> + +<h2 id="See_also" name="See_also">相关</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.offsetWidth")}}</li> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/element/select_event/index.html b/files/zh-cn/web/api/element/select_event/index.html new file mode 100644 index 0000000000..bd9f49413a --- /dev/null +++ b/files/zh-cn/web/api/element/select_event/index.html @@ -0,0 +1,132 @@ +--- +title: select +slug: Web/API/Element/select_event +tags: + - Event +translation_of: Web/API/Element/select_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>select</code></strong> 选择某些文本时会触发事件。</p> + +<p>该事件不适用于所有语言的所有元素。例如，在 HTML，<code>select</code>事件只能在表单{{HtmlElement('input/text', '<input type="text">')}}和 {{HtmlElement("textarea")}}元素上触发。</p> + +<h2 id="General_info">General info</h2> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Interface</th> + <td>{{domxref("UIEvent")}} if generated from a user interface, {{domxref("Event")}} otherwise</td> + </tr> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>No</td> + </tr> + <tr> + <th>Target</th> + <td>{{domxref("Element")}}</td> + </tr> + <tr> + <th>Default Action</th> + <td>None</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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input value="Try selecting some text in this element."> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function logSelection(event) { + const log = document.getElementById('log'); + const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd); + log.textContent = `You selected: ${selection}`; +} + +const input = document.querySelector('input'); +input.addEventListener('select', logSelection);</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例")}}</p> + +<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('UI Events', '#event-type-select', 'select')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onselect")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/setattribute/index.html b/files/zh-cn/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..0855bc31f6 --- /dev/null +++ b/files/zh-cn/web/api/element/setattribute/index.html @@ -0,0 +1,97 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - API + - DOM + - NeedsSpecTable + - 元素 + - 参考 + - 属性 + - 方法 +translation_of: Web/API/Element/setAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。</span></p> + +<p>要获取某个属性当前的值，可使用 {{domxref("Element.getAttribute", "getAttribute()")}}；要删除某个属性，可使用 {{domxref("Element.removeAttribute", "removeAttribute()")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>表示属性名称的字符串。A {{domxref("DOMString")}} specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when <code>setAttribute()</code> is called on an HTML element in an HTML document.</dd> + <dt><code>value</code></dt> + <dd>属性的值/新值。A {{domxref("DOMString")}} 包含了分配给这个属性的值. 任何非字符串的值都会被自动转换为字符串.</dd> +</dl> + +<p>当在 HTML 文档中的 HTML 元素上调用 <code>setAttribute()</code> 方法时，该方法会将其属性名称（attribute name）参数小写化。</p> + +<p>如果指定的属性已经存在，则其值变为传递的值。如果不存在，则创建指定的属性。</p> + +<p>尽管对于不存在的属性，<code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> 返回 <code>null</code>，你还是应该使用 <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> 代替 <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> 来删除属性。</p> + +<p>布尔属性（原文是Boolean attributes）只要出现在元素上就会被认为是 <code>true</code> ，无论它的值是什么; 一般来说, 你应该将 <code>value</code> 设置为空字符串 (<code>""</code>) 。(一些人使用这个属性的名称作为值; 这不会出现什么问题，但这是不规范的). See the {{anch("Example", "example")}} below for a practical demonstration.</p> + +<p>由于将指定的值转换为字符串，因此指定null不一定能达到您的期望。 而不是删除属性或将其值设置为{{jsxref（“ null”）}}，而是将属性的值设置为字符串“ null”。 如果要删除属性，请调用{{domxref（“ Element.removeAttribute”，“ removeAttribute（）”）}}}。</p> + +<h3 id="返回值">返回值</h3> + +<p>{{jsxref("undefined")}}</p> + +<h3 id="例外">例外</h3> + +<dl> + <dt><code>无效字符错误</code></dt> + <dd>指定的属性名称包含一个或多个在属性名称中无效的字符。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>在下面的例子中，<code>setAttribute()</code> 被用于设置 {{HTMLElement("button")}} 上的属性。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><button>Hello World</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js notranslate">var b = document.querySelector("button"); + +b.setAttribute("name", "helloButton"); +b.setAttribute("disabled", ""); +</pre> + +<p>这说明了两件事：</p> + +<ul> + <li>上面对setAttribute（）的第一次调用显示了将name属性的值更改为“ helloButton”。 您可以使用浏览器的页面检查器（Chrome，Edge，Firefox，Safari）查看此内容。</li> + <li>要设置布尔属性的值（例如禁用），可以指定任何值。 建议使用空字符串或属性名称。 重要的是，如果根本不存在该属性，则不管其实际值如何，都将其值视为真实。 该属性的缺失表示其值是false。 通过将Disabled属性的值设置为空字符串（“”），我们将disable设置为true，这将导致按钮被禁用。</li> +</ul> + +<p>{{ EmbedLiveSample('Example', '300', '50') }}</p> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</div> + +<p>{{Compat("api.Element.setAttribute")}}</p> + +<h3 id="Notes" name="Notes">Gecko 备注</h3> + +<p>使用 <code>setAttribute()</code> 修改某些属性值时，尤其是 XUL 中的 <code>value</code>，可能得不到期望结果。这是由于 <code>attribute</code> 指定的是默认值。要访问或修改当前值，应该使用 <code>property</code> 属性。例如，使用 <code>Element.value</code> 代替 <code>Element.setAttribute()</code>。</p> diff --git a/files/zh-cn/web/api/element/setattributenode/index.html b/files/zh-cn/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..1d9c641c8e --- /dev/null +++ b/files/zh-cn/web/api/element/setattributenode/index.html @@ -0,0 +1,46 @@ +--- +title: Element.setAttributeNode() +slug: Web/API/Element/setAttributeNode +tags: + - API + - DOM + - Element +translation_of: Web/API/Element/setAttributeNode +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>setAttributeNode()</code> 为指定的 Element 添加属性节点.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>var replacedAttr</em> = <em>element</em>.setAttributeNode(<em>attribute</em>); +</pre> + +<ul> + <li><code>attribute是添加到 element 中的属性节点</code>.</li> + <li><code>replacedAttr</code> 是被替换掉的属性节点。 如果存在原有属性, 则函数返回原有属性节点. </li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre>// <div id="one" align="left">one</div> +// <div id="two">two</div> +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNode("align"); +d2.setAttributeNode(a.cloneNode(true)); +alert(d2.attributes[1].value) +// returns: `left' +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>如果 element 中已经存在该属性名的属性，则函数使用新的属性替换掉原有的属性并将原有属性返回</p> + +<p>这个方法很少被用到, 多数情况下使用函数 <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute()</a></code> 修改 element 的属性.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core: setAttributeNode</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</p> diff --git a/files/zh-cn/web/api/element/setattributenodens/index.html b/files/zh-cn/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..9e791e1f0c --- /dev/null +++ b/files/zh-cn/web/api/element/setattributenodens/index.html @@ -0,0 +1,47 @@ +--- +title: Element.setAttributeNodeNS() +slug: Web/API/Element/setAttributeNodeNS +translation_of: Web/API/Element/setAttributeNodeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>setAttributeNodeNS</code> 可以给一个元素添加一个新的命名空间的属性节点.</p> + +<p> （如果对中文有疑惑，请直接阅读原文）</p> + +<h2 id="Syntax" name="Syntax">Syntax </h2> + +<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>) +</pre> + +<ul> + <li><code>replacedAttr</code> 是被替换的节点, 如果存在, 由此函数返回.</li> + <li><code>attributeNode</code> 是一个属性节点.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre>// <div id="one" xmlns:myNS="http://www.mozilla.org/ns/specialspace" + myNS:special-align="utterleft">one</div> +// <div id="two">two</div> + + +var myns = "http://www.mozilla.org/ns/specialspace"; +var d1 = document.getElementById("one"); +var d2 = document.getElementById("two"); +var a = d1.getAttributeNodeNS(myns, "special-align"); +d2.setAttributeNodeNS(a.cloneNode(true)); +alert(d2.attributes[1].value) // returns: `utterleft' +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>如果指定的属性在元素上存在, 接着此属性被新的属性替换的话被替换的属性会被返回.</p> + +<p>注意：如果你尝试设置的时候没有克隆那个节点，Mozia会抛出一个NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR ："Attribute already in use" 错误, 因为DOM需要克隆属性之后才能重复使用( 不像其他节点一样可以被删除 ) 。</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS</a></p> diff --git a/files/zh-cn/web/api/element/setattributens/index.html b/files/zh-cn/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c4ceae36df --- /dev/null +++ b/files/zh-cn/web/api/element/setattributens/index.html @@ -0,0 +1,37 @@ +--- +title: Element.setAttributeNS() +slug: Web/API/Element/setAttributeNS +tags: + - Element.setAttributeNS() + - SVG + - 'http://svgjs.com/' +translation_of: Web/API/Element/setAttributeNS +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code>setAttributeNS</code> 添加一个新属性或更改具有给定命名空间和名称的一个属性的值。</p> + +<h2 id="Syntax" name="Syntax">句法</h2> + +<pre class="eval"><em>element</em>.setAttributeNS(<em>namespace</em>,<em>name</em>,<em>value</em>) +</pre> + +<ul> + <li><code>namespace</code> 是指定属性的命名空间的一个字符串。</li> + <li><code>name</code> 是标识要设置的属性的一个字符串。</li> + <li><code>value</code> 是新属性的所需字符串值。</li> +</ul> + +<h2 id="Example" name="Example">范例</h2> + +<pre class="eval">let d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> + +<h2 id="Notes" name="Notes">注释</h2> + +<p>{{ DOMAttributeMethods() }}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> diff --git a/files/zh-cn/web/api/element/setcapture/index.html b/files/zh-cn/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..26d035a813 --- /dev/null +++ b/files/zh-cn/web/api/element/setcapture/index.html @@ -0,0 +1,82 @@ +--- +title: element.setCapture +slug: Web/API/Element/setCapture +translation_of: Web/API/Element/setCapture +--- +<p>{{ ApiRef() }}{{ gecko_minversion_header("2.0") }}</p> + +<h3 id="Summary" name="Summary">概要</h3> + +<p>在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 {{ domxref("document.releaseCapture()") }} 被调用。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">element.setCapture(<em>retargetToElement</em>); +</pre> + +<dl> + <dt><code>retargetToElement</code></dt> + <dd>如果被设置为 <code>true</code>, 所有事件被直接定向到这个元素; 如果是 <code>false</code>, 事件也可以在这个元素的子元素上触发。</dd> +</dl> + +<h3 id="Example" name="Example">示例</h3> + +<p>在这个例子中，当你在一个元素中点击并且按住鼠标，然后再使用鼠标拖动的时候，当前鼠标位置的坐标就会被绘制出来。</p> + +<pre class="brush: html"><html> +<head> + <title>鼠标捕捉示例</title> + <style type="text/css"> + #myButton { + border: solid black 1px; + color: black; + padding: 2px; + -moz-box-shadow:black 2px 2px; + } + </style> + + <script type="text/javascript"> + function init() { + var btn = document.getElementById("myButton"); + btn.addEventListener("mousedown", mouseDown, false); + btn.addEventListener("mouseup", mouseUp, false); + } + + function mouseDown(e) { + e.target.setCapture(); + e.target.addEventListener("mousemove", mouseMoved, false); + } + + function mouseUp(e) { + e.target.removeEventListener("mousemove", mouseMoved, false); + } + + function mouseMoved(e) { + var output = document.getElementById("output"); + output.innerHTML = "鼠标的当前位置: " + e.clientX + ", " + e.clientY; + } + </script> +</head> +<body onload="init()"> + <p>这是一个关于如何在 Gecko 2.0 中针对元素使用鼠标捕捉的示例。</p> + <p><a id="myButton" href="javascript:buttonClicked()">点我并且按住鼠标滑动</a></p> + <div id="output">还没有任何事件哦！</div> +</body> +</html> +</pre> + +<p><a href="/samples/domref/mousecapture.html">查看在线演示</a></p> + +<h3 id="Notes" name="Notes">注意</h3> + +<p>这个元素可能不会完全被滚动到顶部或者底部，这取决于其他元素的布局。</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>无</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ domxref("document.releaseCapture()") }}</li> +</ul> diff --git a/files/zh-cn/web/api/element/setpointercapture/index.html b/files/zh-cn/web/api/element/setpointercapture/index.html new file mode 100644 index 0000000000..401d08e629 --- /dev/null +++ b/files/zh-cn/web/api/element/setpointercapture/index.html @@ -0,0 +1,113 @@ +--- +title: Element.setPointerCapture() +slug: Web/API/Element/setPointerCapture +tags: + - API + - DOM + - Element +translation_of: Web/API/Element/setPointerCapture +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Element")}}接口的<strong><code>setPointerCapture()</code></strong> 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放（通过{{domxref("Element.releasePointerCapture()")}}）。</p> + +<div class="note">一旦设置了pointer capture, {{event("pointerover")}}, {{event("pointerout")}} {{event("pointerenter")}}, 和{{event("pointerleave")}} 事件将不会被触发，直到越过设置了capture的元素的边界。这是因为其他元素将不能再作为pointer事件的目标了。这会影响到这些事件在其他元素上的触发。</div> + +<div> +<h3 id="指针捕获概述">指针捕获概述</h3> +</div> + +<div>指针捕获允许一个特定的指针事件({{domxref("PointerEvent")}}) 事件从一个事件触发时候的目标重定位到另一个目标上。这个功能可以确保一个元素可以持续的接收到一个pointer事件，即使这个事件的触发点已经移出了这个元素（比如，在滚动的时候）。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>pointerId</code></dt> + <dd>{{domxref("PointerEvent")}} 对象的{{domxref("PointerEvent.pointerId", "pointerId")}} 。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回void。如果<code>pointerId</code>不匹配任何当前活动的指针事件，将抛出{{domxref("DOMException")}}。</p> + +<h2 id="示例">示例</h2> + +<p>当您按下它时，此示例在 {{HtmlElement("div")}} 上设置指针捕获。这使您可以滑动元素，即使指针移动到其边界之外也是如此。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="slider">SLIDE ME</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 140px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background: #fbe; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function beginSliding(e) { + slider.onpointermove = slide; + slider.setPointerCapture(e.pointerId); +} + +function stopSliding(e) { + slider.onpointermove = null; + slider.releasePointerCapture(e.pointerId); +} + +function slide(e) { + slider.style.transform = `translate(${e.clientX - 70}px)`; +} + +const slider = document.getElementById('slider'); + +slider.onpointerdown = beginSliding; +slider.onpointerup = stopSliding;</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例")}}</p> + +<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('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不稳定版本</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初版</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.setPointerCapture")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ domxref("Element.releasePointerCapture")}}</li> + <li>{{ domxref("Pointer_events","Pointer Events") }}</li> +</ul> diff --git a/files/zh-cn/web/api/element/shadowroot/index.html b/files/zh-cn/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..2e85ab3d16 --- /dev/null +++ b/files/zh-cn/web/api/element/shadowroot/index.html @@ -0,0 +1,132 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +tags: + - API + - DOM遍历 + - ShadowRoot +translation_of: Web/API/Element/shadowRoot +--- +<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}</p> + +<p><code>Element.shadowRoot</code> 是只读属性，表示元素挂载的shadow root。可以使用 {{domxref('Element.attachShadow')}} 给一个已存在的元素添加shadow root。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.shadowRoot; +</pre> + +<h3 id="值">值</h3> + +<p>可以是一个{{domxref('ShadowRoot')}}实例对象，但如果一个shadow root的 {{domxref("ShadowRoot.mode", "mode")}}被设置为 <code>closed</code>那么它的值将会是 <code>null</code>。(详情请见 {{domxref("Element.attachShadow")}} ).</p> + +<h2 id="示例">示例</h2> + +<p>下面代码片段取自 <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">在线查看</a>), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。</p> + +<p>在<code><custom-square></code>标签的class定义中我们在生命周期的回调函数里调用了一些外部方法——<code>updateStyle()</code>，正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将<code>this</code>（即我们创建的正方形元素本身）作为一个参数传入了这个方法。</p> + +<pre class="brush: js">connectedCallback() { + console.log('Custom square element added to page.'); + updateStyle(this); +} + +attributeChangedCallback(name, oldValue, newValue) { + console.log('Custom square element attributes changed.'); + updateStyle(this); +} +</pre> + +<p>在<code>updateStyle()</code>函数中我们通过{{domxref("Element.shadowRoot")}}获取到了Shadow DOM引用。在这里我们利用了标准的DOM遍历技巧来获取在Shadow DOM中{{htmlelement("style")}}元素并更新了其中的CSS样式：</p> + +<pre class="brush: js">function updateStyle(elem) { + const shadow = elem.shadowRoot; + const childNodes = Array.from(shadow.childNodes); + + childNodes.forEach(childNode => { + if (childNode.nodeName === 'STYLE') { + childNode.textContent = ` + div { + width: ${elem.getAttribute('l')}px; + height: ${elem.getAttribute('l')}px; + background-color: ${elem.getAttribute('c')}; + } + `; + } + }); +}</pre> + +<p> </p> + +<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('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td> + <td>{{Spec2('Shadow DOM')}}</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>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td> 基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/element/show_event/index.html b/files/zh-cn/web/api/element/show_event/index.html new file mode 100644 index 0000000000..c38719c912 --- /dev/null +++ b/files/zh-cn/web/api/element/show_event/index.html @@ -0,0 +1,77 @@ +--- +title: show +slug: Web/API/Element/show_event +translation_of: Web/API/Element/show_event +--- +<p>当一个具有contextmenu属性的元素的contextmenu事件触发或冒泡到该元素时，show事件会被触发。</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.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#context-menus">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">Event</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;">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>{{jsxref("Boolean")}}</td> + <td>事件是否冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可以关闭。</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<pre class="brush:html;"><div contextmenu="test"></div> +<menu type="context" id="test"> + <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> +</menu> + +<script> + document.getElementById("test").addEventListener("show", function(e){ + alert("the context menu will be displayed"); + }, false); +</script> +</pre> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Mozilla_event_reference/contextmenu"><code>contextmenu</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/element/slot/index.html b/files/zh-cn/web/api/element/slot/index.html new file mode 100644 index 0000000000..74189f5ab6 --- /dev/null +++ b/files/zh-cn/web/api/element/slot/index.html @@ -0,0 +1,65 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +tags: + - API + - Element + - Experimental + - shadow dom + - slot +translation_of: Web/API/Element/slot +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p>{{domxref("Element")}}接口的<strong><code>slot</code></strong>属性会返回已插入元素所在的Shadow DOM slot的名称。</p> + +<p>Slot是存在于<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a>内部的占位符，用户可以通过slot属性在web component的内部插入自定义的标记文本。（详见<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>）</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>aString</em> = <em>element</em>.slot +<em>element</em>.slot = <em>aString</em> +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("DOMString")}}.</p> + +<h2 id="示例">示例</h2> + +<p>在示例 <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">simple-template example</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">在线查看</a>)中，我们创建了一个简单的自定义元素叫做 <code><my-paragraph></code> ，并为它添加了shadow root，然后使用一个包含以 <code>my-text</code>为名称的slot的template来填充它。</p> + +<p>当 <code><my-paragraph></code> 在文档中被使用时，slot标签中的内容会被填充到拥有<code>slot="my-text"</code>属性的元素之中，我们称这种元素为slotable element。（事实上可以看作是拥有slot属性的元素被填充到了template中有<code><slot></code>标签存在的地方）请看下面的示例：</p> + +<pre class="brush: js"><my-paragraph> + <span slot="my-text">Let's have some different text!</span> +</my-paragraph></pre> + +<p>在Javascript代码中我们获取到上面代码中的span的引用，然后将对应的 <code><slot></code> 元素的引用的名称打印在控制台中。</p> + +<pre class="brush: js">let slottedSpan = document.querySelector('my-paragraph span') +console.log(slottedSpan.slot); // logs 'my-text' +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM','#widl-Element-slot','slot')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("api.Element.slot")}}</div> + +<div id="compat-mobile"> </div> diff --git a/files/zh-cn/web/api/element/tagname/index.html b/files/zh-cn/web/api/element/tagname/index.html new file mode 100644 index 0000000000..a1264ccd06 --- /dev/null +++ b/files/zh-cn/web/api/element/tagname/index.html @@ -0,0 +1,31 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +translation_of: Web/API/Element/tagName +--- +<p>{{ APIRef() }}</p> +<h2 id="概述">概述</h2> +<p>返回当前元素的标签名</p> +<h2 id="语法">语法</h2> +<pre class="eval"><em>elementName</em> = element.tagName +</pre> +<ul> + <li><code>elementName</code> 是一个字符串,包含了element元素的标签名.</li> +</ul> +<h2 id="备注">备注</h2> +<p>在XML (或者其他基于XML的语言,比如XHTML,xul)文档中,<code>tagName的值会</code>保留原始的大小写. 在HTML文档中, <code>tagName</code>会返回其大写形式. 对于元素节点来说,<code>tagName属性</code>的值和<a href="/zh-cn/DOM/Node.nodeName" title="zh-cn/DOM/Node.nodeName">nodeName</a>属性的值是相同的.</p> +<h2 id="Example" name="Example">例子</h2> +<p>假设给定下面的源码</p> +<pre class="eval"><span id="born">When I was born...</span> +</pre> +<p>然后运行下面的脚本</p> +<pre class="eval">var span = document.getElementById("born"); +alert(span.tagName); +</pre> +<p>在XHTML中 (或者其他的XML格式文件中), 会弹出小写的"span".而在HTML中, 会弹出大写的"SPAN".</p> +<h2 id="规范">规范</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> +<p>{{ languages( { "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName", "pl": "pl/DOM/element.tagName","en": "en/DOM/element.tagName" } ) }}</p> diff --git a/files/zh-cn/web/api/element/toggleattribute/index.html b/files/zh-cn/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c98a1882ef --- /dev/null +++ b/files/zh-cn/web/api/element/toggleattribute/index.html @@ -0,0 +1,113 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +tags: + - API + - Element + - 元素 + - 参考 +translation_of: Web/API/Element/toggleAttribute +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Element")}} 接口的 <code><strong>toggleAttribute()</strong></code> 方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>name</code></dt> + <dd>A {{domxref("DOMString")}} specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when <code>toggleAttribute()</code> is called on an HTML element in an HTML document.</dd> + <dt><code>force</code> {{optional_inline}}</dt> + <dd>A boolean value to determine whether the attribute should be added or removed, no matter whether the attribute is present or not at the moment.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>true</code> if attribute <strong><code>name</code></strong> is eventually present, and <code>false</code> otherwise.</p> + +<h3 id="异常">异常</h3> + +<dl> + <dt><code>InvalidCharacterError</code></dt> + <dd>The specified attribute <code>name</code> contains one or more characters which are not valid in attribute names.</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>在下面的例子中，<code>toggleAttribute()</code> 被用于切换 {{HTMLElement("input")}} 的 <code>readonly</code> 属性。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><input value="text"> +<button>toggleAttribute("readonly")</button></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js notranslate">var button = document.querySelector("button"); +var input = document.querySelector("input"); + +button.addEventListener("click", function(){ + input.toggleAttribute("readonly"); +}); +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('Example', '300', '50') }}</p> + +<p>{{DOMAttributeMethods}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<div class="standardNoteBlock"> +<p><strong>译者注</strong>：下面代码中的 <code>void 0</code> 即 <code>undefined</code>。</p> +</div> + +<pre class="brush: js notranslate">if (!Element.prototype.toggleAttribute) { + Element.prototype.toggleAttribute = function(name, force) { + if(force !== void 0) force = !!force + + if (this.getAttribute(name) !== null) { + if (force) return true; + + this.removeAttribute(name); + return false; + } else { + if (force === false) return false; + + this.setAttribute(name, ""); + return true; + } + }; +} +</pre> + +<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('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.toggleAttribute")}}</p> diff --git a/files/zh-cn/web/api/element/touchcancel_event/index.html b/files/zh-cn/web/api/element/touchcancel_event/index.html new file mode 100644 index 0000000000..b6c3f26d83 --- /dev/null +++ b/files/zh-cn/web/api/element/touchcancel_event/index.html @@ -0,0 +1,68 @@ +--- +title: touchcancel +slug: Web/API/Element/touchcancel_event +tags: + - Event + - TouchEvent + - UI + - UI Events + - UX + - 事件 + - 触摸 + - 触摸事件 +translation_of: Web/API/Element/touchcancel_event +--- +<p>当触摸点被中断时会触发 <code>touchcancel</code> 事件，中断方式基于特定实现而有所不同（例如， 创建了太多的触摸点）。</p> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>No</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{ DOMxRef("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>在这个专用页面查看这些事件的代码样例：<a href="/en-US/docs/DOM/Touch_events">Touch events</a>。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchcancel')}}</td> + <td>{{Spec2('Touch Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.touchcancel_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</li> + <li>目标为 <code><a href="/en-US/docs/Web/API/Document">Document</a></code> 的相同事件： <code><a href="/en-US/docs/Web/API/Document/touchcancel_event">touchcancel</a> </code></li> +</ul> diff --git a/files/zh-cn/web/api/element/touchstart_event/index.html b/files/zh-cn/web/api/element/touchstart_event/index.html new file mode 100644 index 0000000000..17de790399 --- /dev/null +++ b/files/zh-cn/web/api/element/touchstart_event/index.html @@ -0,0 +1,70 @@ +--- +title: touchstart +slug: Web/API/Element/touchstart_event +tags: + - Event + - UI + - UI Events + - UX + - touchstart + - 事件 + - 触摸 + - 触摸事件 +translation_of: Web/API/Element/touchstart_event +--- +<p>{{APIRef}}</p> + +<p>当一个或多个触摸点与触控设备表面接触时触发<code>touchstart</code> 事件.</p> + +<table class="properties"> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>这些时间的代码样例可在这个专用页面查看：<a href="/en-US/DOM/Touch_events">Touch events</a>.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchstart')}}</td> + <td>{{Spec2('Touch Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.touchstart_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Touch_events">Touch events</a></li> + <li>以 <code><a href="/en-US/docs/Web/API/Document">Document</a></code> 为目标的相同事件：<code><a href="/en-US/docs/Web/API/Document/touchstart_event">touchstart</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/element/wheel_event/index.html b/files/zh-cn/web/api/element/wheel_event/index.html new file mode 100644 index 0000000000..d426fa2e77 --- /dev/null +++ b/files/zh-cn/web/api/element/wheel_event/index.html @@ -0,0 +1,266 @@ +--- +title: 滚轮事件 +slug: Web/API/Element/wheel_event +translation_of: Web/API/Element/wheel_event +--- +<p>当滚动鼠标滚轮或操作其它类似输入设备时会触发<strong>滚轮事件</strong>。滚轮事件替换了已被弃用的非标准{{domxref("mousewheel")}}事件。</p> + +<div class="note"><strong>注意事项：</strong> 请勿想当然依据滚轮方向（即该事件的各delta属性值）来推断文档内容的滚动方向，因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为，也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。要获取文档内容的滚动方向，可在文档内容滚动事件（{{event("scroll")}}）中监视{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}二值变化情况，即可推断出滚动方向了。</div> + +<h2 id="概要">概要</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("WheelEvent")}}</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;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">目标元素</dt> + <dd style="margin: 0 0 0 120px;">defaultView, 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> + +<p><em>滚轮事件实现了以下事件的属性： {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p> + +<h3 id="Properties_of_WheelEvent">Properties of <code>WheelEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/WheelEvent", "属性")}}</p> + +<h3 id="Properties_of_MouseEvent">Properties of <code>MouseEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/MouseEvent", "属性")}}</p> + +<h3 id="Properties_of_UIEvent">Properties of <code>UIEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/UIEvent", "属性")}}</p> + +<h3 id="Properties_of_Event">Properties of <code>Event</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/Event", "属性")}}</p> + +<h2 id="方法">方法</h2> + +<p><em>滚轮事件实现了以下事件的方法： {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p> + +<h3 id="Methods_of_WheelEvent">Methods of <code>WheelEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/WheelEvent", "方法")}}</p> + +<h3 id="Methods_of_MouseEvent">Methods of <code>MouseEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/MouseEvent", "方法")}}</p> + +<h3 id="Methods_of_UIEvent">Methods of <code>UIEvent</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/UIEvent", "方法")}}</p> + +<h3 id="Methods_of_Event">Methods of <code>Event</code></h3> + +<p>{{page("/zh-CN/docs/Web/API/Event", "方法")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.wheel_event")}}</p> + +<h3 id="跨浏览器监听滚动事件">跨浏览器监听滚动事件</h3> + +<p><code><font face="Open Sans, Arial, sans-serif">以下脚本创建了一个全局的 </font>addWheelListener</code> 方法，它可以兼容各浏览器监听滚动事件，并且阻止默认行为。</p> + +<pre class="brush:js;">// creates a global "addWheelListener" method +// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } ); +(function(window,document) { + + var prefix = "", _addEventListener, onwheel, support; + + // detect event model + if ( window.addEventListener ) { + _addEventListener = "addEventListener"; + } else { + _addEventListener = "attachEvent"; + prefix = "on"; + } + + // detect available wheel event + support = "onwheel" in document.createElement("div") ? "wheel" : // 各个厂商的高版本浏览器都支持"wheel" + document.onmousewheel !== undefined ? "mousewheel" : // Webkit 和 IE一定支持"mousewheel" + "DOMMouseScroll"; // 低版本firefox + + window.addWheelListener = function( elem, callback, useCapture ) { + _addWheelListener( elem, support, callback, useCapture ); + + // handle MozMousePixelScroll in older Firefox + if( support == "DOMMouseScroll" ) { + _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture ); + } + }; + + function _addWheelListener( elem, eventName, callback, useCapture ) { + elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) { + !originalEvent && ( originalEvent = window.event ); + + // create a normalized event object + var event = { + // keep a ref to the original event object + originalEvent: originalEvent, + target: originalEvent.target || originalEvent.srcElement, + type: "wheel", + deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, + deltaX: 0, + deltaZ: 0, + preventDefault: function() { + originalEvent.preventDefault ? + originalEvent.preventDefault() : + originalEvent.returnValue = false; + } + }; + + // calculate deltaY (and deltaX) according to the event + if ( support == "mousewheel" ) { + event.deltaY = - 1/40 * originalEvent.wheelDelta; + // Webkit also support wheelDeltaX + originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); + } else { + event.deltaY = originalEvent.detail; + } + + // it's time to fire the callback + return callback( event ); + + }, useCapture || false ); + } + +})(window,document);</pre> + +<h2 id="Gecko_notes">Gecko notes</h2> + +<h3 id="滚轮事件和其它的鼠标滚动事件">滚轮事件和其它的鼠标滚动事件</h3> + +<p>如果一个用户真实操作触发的滚轮事件没有被处理, 这会触发一个 <code>DOMMouseScroll</code> 事件和一个 <code>MozMousePixelScroll</code> 事件以向下兼容. 它们的属性值由滚轮事件delta值和最近的ancestor clipped元素计算出。(i.e., <a href="/en-US/CSS/overflow" title="en-US/CSS/overflow"><code>overflow</code></a> 不可见). 如果滚轮事件或其它任意一个剩余事件被 {{ domxref("event.preventDefault()") }}阻止, 将什么都不会发生。</p> + +<p>以下为事件顺序:</p> + +<ol> + <li>滚轮事件处于默认事件组 (web应用和浏览器插件都可以处理这个组的事件)</li> + <li>当连续滚轮事件 deltaY 的值累计大于1或小于－1时，<code><font face="Open Sans, Arial, sans-serif">竖直方向的 </font>DOMMouseScroll</code> 事件既属于默认事件组也属于系统事件组</li> + <li>当最近的滚轮事件的 deltaY 值非零时，两个事件组都包含竖直方向的 MozMousePixelScroll 事件</li> + <li>当连续滚轮事件 deltaX 的值累计大于1或小于－1时，两个事件组都包含水平<code><font face="Open Sans, Arial, sans-serif">方向的 </font>DOMMouseScroll</code> 事件</li> + <li>当最近的滚轮事件的 deltaX 值非零时，两个事件组都包含水平方向的 MozMousePixelScroll 事件</li> + <li>一个滚轮事件处于系统事件组 (只有浏览器插件可以处理这个组的事件)</li> +</ol> + +<table> + <caption><code><font face="Open Sans, Arial, sans-serif">各个事件调用 </font>preventDefault()</code> 会发生什么？</caption> + <thead> + </thead> + <tbody> + <tr> + <th scope="row"><code>wheel</code> (default event group)</th> + <td><code>preventDefault()</code> called</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row"><code>DOMMouseScroll</code> (Vertical)</th> + <td>Not fired</td> + <td><code>preventDefault()</code> called</td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row"><code>MozMousePixelScroll</code> (Vertical)</th> + <td>Not fired</td> + <td><code>defaultPrevented</code> is true</td> + <td><code>preventDefault()</code> called</td> + <td></td> + <td></td> + </tr> + <tr> + <th scope="row"><code>DOMMouseScroll</code> (Horizontal)</th> + <td>Not fired</td> + <td>Not affected</td> + <td>Not affected</td> + <td><code>preventDefault()</code> called</td> + <td></td> + </tr> + <tr> + <th scope="row"><code>MozMousePixelScroll</code> (Horizontal)</th> + <td>Not fired</td> + <td>Not affected</td> + <td>Not affected</td> + <td><code>defaultPrevented</code> is true</td> + <td><code>preventDefault()</code> called</td> + </tr> + <tr> + <th scope="row"><code>wheel</code> (system event group)</th> + <td><code>defaultPrevented</code> is true</td> + <td><code>defaultPrevented</code> is true</td> + <td><code>defaultPrevented</code> is true</td> + <td><code>defaultPrevented</code> is true</td> + <td><code>defaultPrevented</code> is true</td> + </tr> + </tbody> +</table> + +<p>如果一个浏览器插件需要知道剩余事件是否被web内容所处理，它可以使用第6个滚轮事件判断，详细内容请查阅系统事件组 <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService" title="/en-US/docs/XPCOM_Interface_Reference/nsIEventListenerService"><code>nsIEventListenerService</code></a> 的文档。</p> + +<p>通过设置用户偏好可以修改delta值和默认行为 (<a href="https://wiki.mozilla.org/Gecko:Mouse_Wheel_Scrolling#Preferences_for_customizing_delta_values_and_default_action" title="/en-US/docs/HTML/Element/details">details</a>)， 因此开发者不应该期望在处理这个事件后发生特殊的行为。</p> + +<h3 id="delta_值">delta 值</h3> + +<p>delta 值并不代表默认情况下的实际滚动值，如果用户在滚动滚轮时按住其他键，可能会产生其他行为，比如在浏览记录中前进／回退，或者放大／缩小网页内容。 此外，滚动过程中被滚动的元素不一定是目标元素，滚轮事件的目标元素是由事件触发时光标所在位置计算出的。 That event may not only not be the one actually being scrolled, 甚至都不可滚动。</p> + +<h3 id="deltaMode_值">deltaMode 值</h3> + +<p>在 Windows 下, 以下三个原生事件造成了 DOM <font face="Consolas, Liberation Mono, Courier, monospace">滚轮事件。</font></p> + +<dl> + <dt>WM_MOUSEWHEEL (竖直方向的滚动事件)</dt> + <dd><code>deltaMode</code> 值可以是 <code>DOM_DELTA_LINE</code> 或 <code>DOM_DELTA_PAGE。</code>它取决于 Windows 的用户设置 (默认设置为 <code>DOM_DELTA_LINE</code>)。</dd> + <dt>WM_MOUSEHWHEEL (水平方向的滚动事件)</dt> + <dd><code>deltaMode</code> 值可以是 <code>DOM_DELTA_LINE</code> 或 <code>DOM_DELTA_PAGE。然而 </code>Windows 的滚轮速度设置界面和鼠标驱动工具都没有提供改为 page scroll 的选项。 所以这个值通常为 <code>DOM_DELTA_LINE</code>.</dd> + <dt>WM_GESTURE (Only when caused by panning)</dt> + <dd><code>deltaMode </code>值总是 <code>DOM_DELTA_PIXEL。</code>但请注意大多数笔记本的触摸板都在模拟鼠标滚轮事件而不是调用这个事件， WM_GESTURE 事件通常被平板电脑使用。</dd> +</dl> + +<p>在 Mac 下 deltaMode 值由设备决定. 如果设备支持高分辨率像素级滚动, <code>deltaMode </code>值就是典型的 <code>DOM_DELTA_PIXEL</code>. 然而用户可以通过加前缀<code>"mousewheel.enable_pixel_scrolling"</code>将其改变为 <code>DOM_DELTA_LINE</code> 。如果设备不支持高分辨率滚动，那么 deltaModel 值将一直为 <code>DOM_DELTA_LINE</code>.</p> + +<p><code><font face="Open Sans, Arial, sans-serif">在其它平台下， deltaMode 值总是 </font>DOM_DELTA_LINE</code>.</p> + +<h3 id="Untrusted_events">Untrusted events</h3> + +<p>非用户真实操作触发的滚轮事件不会引发默认行为。</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{ domxref("WheelEvent") }}</li> + <li>Gecko's legacy events: <code>DOMMouseScroll</code> and <code>MozMousePixelScroll</code></li> + <li>Non-Gecko browsers' legacy event: <code>mousewheel</code></li> + <li>WebKit bug: <a href="https://bugs.webkit.org/show_bug.cgi?id=94081" title="https://bugs.webkit.org/show_bug.cgi?id=94081">https://bugs.webkit.org/show_bug.cgi?id=94081</a></li> +</ul> |