1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
---
title: HTMLAreaElement
slug: Web/API/HTMLAreaElement
translation_of: Web/API/HTMLAreaElement
---
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>
<p><strong><code>HTMLAreaElement</code></strong> 接口提供了一些属性和方法 (除了常见的对象{{domxref("HTMLElement")}} 接口提供的属性和方法通过继承也能获取到) 用来控制一个area元素的布局和展现。</p>
<h2 id="属性">属性</h2>
<p><em>从它的父对象{{domxref("HTMLElement")}}继承的，还有从{{domxref("URLUtils")}}继承的。</em></p>
<dl>
<dt>{{domxref("HTMLAreaElement.accessKey")}}</dt>
<dd>值为一个 {{domxref("DOMString")}} 类型，包含了一个简单的字符代表键盘上的一个按键，相当于快捷键。</dd>
<dt>{{domxref("HTMLAreaElement.alt")}}</dt>
<dd>值为一个{{domxref("DOMString")}} 类型，代表了 {{ htmlattrxref("alt", "area") }} HTML 属性,，包含一个area对象显示异常的情况下显示的备用文本字符串。</dd>
<dt>{{domxref("HTMLAreaElement.coords")}}</dt>
<dd>值为一个 {{domxref("DOMString")}} 类型，代表了 {{ htmlattrxref("coords", "area") }} HTML 属性, 包含了定义热区相关的坐标。</dd>
<dt>{{domxref("HTMLAreaElement.download")}} {{experimental_inline}}</dt>
<dd>值为一个 {{domxref("DOMString")}} 类型，表明此资源是将要被下载的资源而不是显示在浏览器页面中。值为下载保存文件的推荐文件名。如果名字在操作系统里不是一个合格的文件名格式，浏览器将会做相应的修改。</dd>
<dt>{{domxref("URLUtils.hash")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the fragment identifier (including the leading hash mark (#)), if any, in the referenced URL.</dd>
<dt>{{domxref("URLUtils.host")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the hostname and port (if it's not the default port) in the referenced URL.</dd>
<dt>{{domxref("URLUtils.hostname")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the hostname in the referenced URL.</dd>
<dt>{{domxref("URLUtils.href")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("href", "area") }} HTML attribute, containing a valid URL of a linked resource.</dd>
<dt>{{domxref("HTMLAreaElement.hreflang")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("hreflang", "area") }} HTML attribute, indicating the language of the linked resource.</dd>
<dt>{{domxref("HTMLAreaElement.media")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("media", "area") }} HTML attribute, indicating target media of the linked resource.</dd>
<dt>{{domxref("HTMLAreaElement.noHref")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("Boolean")}} flag indicating if the area is inactive (<code>true</code>) or active (<code>false</code>).</dd>
<dt>{{domxref("URLUtils.password")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
<dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
<dt>{{domxref("URLUtils.pathname")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the path name component, if any, of the referenced URL.</dd>
<dt>{{domxref("URLUtils.port")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the port component, if any, of the referenced URL.</dd>
<dt>{{domxref("URLUtils.protocol")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the protocol component (including trailing colon <code>':'</code>), of the referenced URL.</dd>
<dt>{{domxref("HTMLAreaElement.rel")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("rel", "area") }} HTML attribute, indicating relationships of the current document to the linked resource.</dd>
<dt>{{domxref("HTMLAreaElement.relList")}} {{readOnlyInline}}</dt>
<dd>Returns a {{domxref("DOMTokenList")}} that reflects the {{ htmlattrxref("rel", "area") }} HTML attribute, indicating relationships of the current document to the linked resource, as a list of tokens.</dd>
<dt>{{domxref("HTMLAreaElement.search")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the search element (including leading question mark <code>'?'</code>), if any, of the referenced URL.</dd>
<dt>{{domxref("HTMLAreaElement.shape")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("shape", "area") }} HTML attribute, indicating the shape of the hot-spot, limited to known values.</dd>
<dt>{{domxref("HTMLAreaElement.tabIndex")}}</dt>
<dd>Is a <code>long</code> containing the element's position in the tabbing order.</dd>
<dt>{{domxref("HTMLAreaElement.target")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "area") }} HTML attribute, indicating the browsing context in which to open the linked resource.</dd>
<dt>{{domxref("HTMLAreaElement.type")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("type", "area") }} HTML attribute, indicating the MIME type of the linked resource.</dd>
<dt>{{domxref("URLUtils.username")}}</dt>
<dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}} and implement those from {{domxref("URLUtils")}}.</em></p>
<dl>
<dt>{{domxref("URLUtils.toString()")}}</dt>
<dd>Returns a {{domxref("DOMString")}} containing the whole URL of the script executed in the {{domxref("Worker")}}. It is a synonym for {{domxref("URLUtils.href")}}.</dd>
</dl>
<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', "the-map-element.html#the-area-element", "HTMLAreaElement")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>The following property has been added: <code>download</code>.<br>
Technically, the URL-related properties, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, and <code>hash</code>, have been moving to the {{domxref("URLUtils")}} interface, and <code>HTMLAreaElement</code> implements this interface.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-area-element", "HTMLAreaElement")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Technically, the properties <code>tabindex</code> and <code>accesskey</code> are now defined on {{domxref("HTMLElement")}}.<br>
The following property is now obsolete: <code>nohref</code>.<br>
The following properties have been added: <code>rel</code>, <code>relList</code>, <code>media</code>, <code>hreflang</code>, <code>type</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, and <code>hash</code>.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 HTML', 'html.html#ID-26019118', 'HTMLAreaElement')}}</td>
<td>{{Spec2('DOM2 HTML')}}</td>
<td>No change from {{SpecName("DOM1")}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-html.html#ID-26019118', 'HTMLAreaElement')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(1.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>download</code> {{experimental_inline}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>username</code>, <code>password</code>, and <code>origin</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("26.0")}}</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>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(1.0)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>download</code> {{experimental_inline}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>username</code>, <code>password</code>, and <code>origin</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("26.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>HTML element implementing this interface: {{ HTMLElement("area") }}.</li>
</ul>
|
