aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/htmlelement/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/htmlelement/index.html')
-rw-r--r--files/zh-cn/web/api/htmlelement/index.html502
1 files changed, 502 insertions, 0 deletions
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 &amp; 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>