recursal/MDN huggingface dataset:
HTMLElement：dragenter 事件
========================

`dragenter` 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。

目标对象是*用户直接选择的范围*（由用户直接指示作为放置目标的元素），或者 `<body>` 元素。

语法
--

在 `addEventListener()` 等方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("dragenter", (event) => {});

ondragenter = (event) => {};
```

事件类型
----

一个 `DragEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent

DragEvent事件属性
----

*除了以下的属性，来自父接口 `Event` 的属性也是可用的。*

`DragEvent.dataTransfer` 只读 

在拖放交互期间转移的数据。

示例
--

### dragenter 事件触发时放置区域的样式

在该示例中，我们在容器中有一个可拖动的元素。尝试抓住元素，拖动它进入另一个容器，然后释放它。

当拖动的元素在另一个容器上时，我们监听的 `dragenter` 事件将给它一个紫色的背景，以表明可拖动的元素可以放置到该容器中。

注意，在这个部分示例中，我们还没有实现放置：关于拖放的完整示例，请参见 `drag` 事件这页。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```


#### JavaScript


```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondragenter |
| HTML Standard # event-dnd-dragenter |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他拖放事件：
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragleave`
    + `drop`
* 其他目标中的该事件：
    + `Window`：`dragenter` 事件
    + `Document`：`dragenter` 事件
    + `SVGElement`：`dragenter` 事件
HTMLElement.dir
===============

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

元素的文本书写方向性是指该文本呈现的方向（用于支持不同的语言系统）。阿拉伯语言和希伯来语是典型的使用 RTL 方向性的语言。

图片可以将其 `dir` 属性设置为“`rtl`”，在这种情况下，HTML 属性 `title` 和 `alt` 将被格式化并定义为“`rtl`”。

当表格的 `dir` 设置为“`rtl`”时，列是从右到左排列的。

当一个元素的 dir 设置为“`auto`”时，该元素的方向是根据其第一个强方向性字符决定的，或者默认为其父元素的方向性。

**备注：** 浏览器可能允许用户改变 `<input>` 和 `<textarea>` 的方向性，以协助编写内容。Chrome 和 Safari 在输入字段的上下文菜单中提供方向性选项，而 Internet Explorer 和 Edge 使用组合键 `Ctrl` + 左 `Shift` 和 `Ctrl` + 右 `Shift`。Firefox 使用组合键 `Ctrl`/`Cmd` + `Shift` + `X`，但不更新 **`dir`** 属性值。

值
-

下列值的其中一个：

* `ltr`，表示从左到右；
* `rtl`，表示从右到左；
* `auto`，表示元素的方向必须根据元素的内容来确定。
示例
--


```js
const parg = document.getElementById("para1");
parg.dir = "rtl";
// 改变 ID 为“para1”的元素内容的文本书写方向。
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-dir |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `document.dir`
* HTML `dir` 全局属性
* CSS 属性 `direction`
* CSS 伪类 `:dir`
HTMLElement.outerText
=====================

`HTMLElement` 接口的 **`outerText`** 属性返回与 `HTMLElement.innerText` 相同的值。当用作 setter 时，它会用给定的文本替换整个当前节点（这与 `innerText` 不同，后者替换当前节点的*内部*内容）。

请参阅 `HTMLElement.innerText` 以了解更多信息和有关两个属性用作 getter 的示例。

值
-

一个表示元素及其后代元素的渲染的文本内容的字符串。

如果这个元素本身没有被渲染（例如，从文档中分离或是从视图中隐藏），返回值与 `Node.textContent` 属性的返回值相同。

当用作 setter 时，它会用给定的文本替换当前节点，并将任何换行符转换为 `<br>` 元素。

示例
--

这个例子突出了 `outerText` 和 `innerText` 在用作 setter 时的根本区别（它们用做 getter 时行为完全一致）。

**备注：** 这个示例是 innerText 和 outerText 有什么区别？（Stack overflow）的修订后的版本，由 codingintrigue 发起，基于 CC BY-SA 3.0 许可证发布。

考虑包含如下 HTML 代码的页面：


```html
<div>
  <p>原始内容</p>
</div>
```


`outerText` 替换了整个选中的元素，因此 JavaScript 语句 `p.outerText = "整个元素已替换"` 替换了整个选中的 `p` 元素：


```html
<div>整个元素已替换</div>
```


相比之下，`p.innerText = "元素内容已替换"` 替换了所选中的 `p` 元素的内部内容：


```html
<div>
  <p>元素内容已替换</p>
</div>
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-outertext |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLElement.innerText`
* `Element.outerHTML`
Element.accessKey
=================

元素的 **Element.accessKey** 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。

**备注：** **Element.accessKey** 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定 accessKey 键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。
accessKeyLabel
==============

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

语法
--
```

label = element.accessKeyLabel
```

示例
--

### JavaScript


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

### HTML


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

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-accesskeylabel |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `element.accessKey`
* The accesskey global attribute.
HTMLElement：drop 事件
===================

**`drop`** 事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 `drop` 事件始终按预期触发，应当在处理 `dragover` 事件的代码部分始终包含 `preventDefault()` 调用。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("drop", (event) => {});

ondrop = (event) => {};
```

事件类型
----

一个 `DragEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent

DragEvent事件属性
----

*除了下面列出的属性外，还可以使用父接口 `Event` 的属性。*

`DragEvent.dataTransfer` 只读 

在进行拖放操作时，传输的数据。

示例
--

### 一个最小的拖放示例

在此示例中，我们在容器内有一个可拖动元素。尝试抓住这个元素，将其拖到另一个容器中，然后释放它。

我们在这里使用了三个事件处理器：

* 在 `dragstart` 事件处理器中，我们获得对用户拖动的元素的引用。
* 在目标容器的 `dragover` 事件处理器中，我们调用 `event.preventDefault()`，以使得该元素能够接收 `drop` 事件。
* 在放置区域的 `drop` 事件处理器中，我们将可拖动元素从原先的容器移动到该放置区域。

完整的拖放示例，请参见 `drag` 事件。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">这个 div 可以拖动</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}
```


#### JavaScript


```js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 保存被拖动元素的引用
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // 阻止默认行为以允许放置
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // 阻止默认行为（会作为某些元素的链接打开）
  event.preventDefault();
  // 将被拖动的元素移动到选定的放置目标
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondrop |
| HTML Standard # event-dnd-drop |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他拖放事件：
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
* 其他目标上的此事件：
    + `Window`：`drop` 事件
    + `Document`：`drop` 事件
    + `SVGElement`：`drop` 事件
HTMLElement：drag 事件
===================

`drag` 事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("drag", (event) => {});

ondrag = (event) => {};
```

事件类型
----

一个 `DragEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent

DragEvent事件属性
----

*除了下面列出的属性外，还可以使用父接口 `Event` 的属性。*

`DragEvent.dataTransfer` 只读 

在进行拖放操作时，传输的数据。

示例
--

### 拖放示例

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">这个 div 可以拖动</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
let dragged;

/\* 在可拖动的目标上触发的事件 \*/
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // 保存被拖动元素的引用
  dragged = event.target;
  // 设置为半透明
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // 拖动结束，重置透明度
  event.target.classList.remove("dragging");
});

/\* 在放置目标上触发的事件 \*/
const target = document.getElementById("droptarget");
target.addEventListener(
  "dragover",
  (event) => {
    // 阻止默认行为以允许放置
    event.preventDefault();
  },
  false,
);

target.addEventListener("dragenter", (event) => {
  // 在可拖动元素进入潜在的放置目标时高亮显示该目标
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // 在可拖动元素离开潜在放置目标元素时重置该目标的背景
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

target.addEventListener("drop", (event) => {
  // 阻止默认行为（会作为某些元素的链接打开）
  event.preventDefault();
  // 将被拖动元素移动到选定的目标元素中
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他拖放事件：
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 其他目标上的此事件：
    + `Window`：`drag` 事件
    + `Document`：`drag` 事件
    + `SVGElement`：`drag` 事件
Document：dragend 事件
===================

`dragend` 事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。

该事件无法取消。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("dragend", (event) => {});

ondragend = (event) => {};
```

事件类型
----

`DragEvent`，继承自 `Event`。

Event

UIEvent

MouseEvent

DragEvent事件属性
----

除了以下列出的额外属性，还可以使用从父接口 `Event` 继承的属性。

`DragEvent.dataTransfer` 只读 

在执行拖放操作时传输的数据。

示例
--

### 在拖放结束时重置不透明度

在本示例中，我们在容器中有一个可拖动的元素。尝试抓住元素，拖动它，然后释放它。

我们在拖动元素时，使元素变得半透明，并监听 `dragend` 事件以在释放元素时重置其不透明度。

参见 `drag` 事件，以获取完整的拖放示例。

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">这个 div 是可拖动的</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* Prevent the user selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
document.addEventListener("dragstart", (event) => {
  // make it half transparent
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // reset the transparency
  event.target.classList.remove("dragging");
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondragend |
| HTML Standard # event-dnd-dragend |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他拖放事件：
    + `drag`
    + `dragstart`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
* 其他目标上的 `dragend` 事件：
    + `Window`：`dragend` 事件
    + `HTMLElement`：`dragend` 事件
    + `SVGElement`：`dragend` 事件
HTMLElement.offsetHeight
========================

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

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

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

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

**备注：** 这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 `element.getBoundingClientRect()`.

语法
--
```

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


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

示例
--

![Image:Dimensions-offset.png](/zh-CN/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

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

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

### 备注

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

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth`
* Determining the dimensions of elements 如何选择（计算）元素占用的空间
* MSDN Measuring Element Dimension and Location
HTMLElement：copy 事件
===================

**`copy`** 事件在用户通过浏览器的用户界面开始复制操作时触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("copy", (event) => {});

oncopy = (event) => {};
```

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent事件属性
----

*也从其父接口 `Event` 继承属性。*

`ClipboardEvent.clipboardData` 只读 

一个 `DataTransfer` 对象，其包含用户发起的 `cut`、`copy` 或 `paste` 操作所影响的数据，以及它的 MIME 类型。

示例
--

此示例阻止每一次对 `<textarea>` 的复制和粘贴的尝试。

### HTML


```html
<h3>试一下这个文本区域：</h3>
<textarea id="editor" rows="3">
尝试对该字段复制和粘贴文本！
</textarea>

<h3>日志：</h3>
<p id="log"></p>
```

### JavaScript


```js
const log = document.getElementById("log");

function logCopy(event) {
  log.innerText = `已阻止复制！\n${log.innerText}`;
  event.preventDefault();
}

function logPaste(event) {
  log.innerText = `已阻止粘贴！\n${log.innerText}`;
  event.preventDefault();
}

const editor = document.getElementById("editor");

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### 结果

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关事件
    + `HTMLElement.cut_event`
    + `HTMLElement.paste_event`
HTMLElement.hidden
==================

`HTML 元素`的 **`hidden`** 属性是一个 `Boolean` 类型的值，如果想要隐藏元素，就将值设置为 `true`，否则就将值设置为`false`。这完全不同于使用 CSS 属性 `display` 来控制一个元素的可见性。

`hidden` 属性应用于所有展现模式，并且不应用于隐藏用户可直接访问的内容。

适用的情况，包括：

* 目前还不相关但将来可能会被用到的内容
* 之前还需要但现在不再被需要用到的内容
* 以类似于模板的方式被页面的其他部分所重复使用的内容
* 创建一个屏幕上不可见的画布来作为绘制的缓冲区

不适用的情况，包括

* 隐藏选项卡的对话框中的面板
* 隐藏一个演示文稿中的内容，同时又希望这个内容在其他演示文稿中是可见的

**备注：** Elements that are not `hidden` must not link to elements which are.

语法
--
```

isHidden = HTMLElement.hidden;

HTMLElement.hidden = true | false;
```

### 值

`Boolean` 类型的值，如果想要隐藏元素，则设置为 `true`，否则设置为 `false`。

示例
--

在这个例子中，当用户点击了 welcome 面板中的按钮后，welcome 面板就会被隐藏掉，并在原位置显示出 follow-up 面板，follow-up 面板包含了致谢信息。

### JavaScript


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


这段代码用来为 welcome 面板中的按钮绑定一个事件监听器，这个事件监听器会隐藏 welcome 面板并在其原位置显示出 follow-up 面板。

### HTML

welcome 面板和 follow-up 面板的 HTML 代码。

#### The welcome panel


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


这段 HTML 代码用于创建一个面板（是一个 `<div>` 的块），这个面板会对进入到该站点的用户表示欢迎，并提示他们只要点击了按钮就代表他们同意面板的内容。

#### The follow-up panel

一旦用户点击了 welcome 面板中的按钮，JavaScript 代码就会通过修改 `hidden` 属性来切换 welcome 面板和 follow-up 面板。


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

上述内容使用了下述的 CSS 样式。


```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%;
}
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-hidden |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `hidden` 属性
* `display`
HTMLElement.isContentEditable
=============================

概述
--

**`HTMLElement.isContentEditable`** 只读属性返回一个`布尔值`：如果当前元素的内容为可编辑状态，则返回 `true`，否则返回 `false`。

语法
--
```

editable = element.isContentEditable
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-iscontenteditable-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `HTMLElement.contentEditable`
* 全局属性 contenteditable
HTMLElement.offsetTop
=====================

**`HTMLElement.offsetTop`** 为只读属性，它返回当前元素相对于其 `offsetParent` 元素的顶部内边距的距离。

语法
--
```

topPos = element.offsetTop;
```

### 参数

* `topPos` 为返回的像素数。
示例
--


```js
var d = document.getElementById("div1");
var topPos = d.offsetTop;

if (topPos > 10) {
  // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
}
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsettop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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.)
HTMLElement.title
=================

**`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 = '维基百科上对葡萄的描述';
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement.contentEditable
===========================

概述
--

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

* `"true"` 表明该元素可编辑。
* `"false"` 表明该元素不可编辑。
* `"plaintext-only"` 表明该元素可以纯文本格式编辑，富文本格式会被禁用。
* `"inherit"` 表明该元素继承了其父元素的可编辑状态。
语法
--
```

editable = element.contentEditable
element.contentEditable = "true"
```

规范
--

| Specification |
| --- |
| HTML Standard # contenteditable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

相关链接
----

* `HTMLElement.isContentEditable`
* 全局属性 contenteditable
* Why ContentEditable is Terrible, Or: How the Medium Editor Works
HTMLElement：innerText 属性
========================

`HTMLElement` 接口的 **`innerText`** 属性表示一个节点及其后代所渲染文本的内容。

作为一个 getter，它近似于用户用光标突出该元素的内容，然后将其复制到剪贴板上所得到的文本。作为一个 setter，这将用给定的值替换该元素的子元素，并将任何换行符转换为 `<br>` 元素。

**备注：** `innerText` 很容易与 `Node.textContent` 混淆，但这两个属性间实际上有很重要的区别。大体来说，`innerText` 知道文本的渲染外观，而 `textContent` 不知道。

### 输出

一个字符串，代表元素的渲染文本内容。

如果元素本身没有被渲染（例如，从文档中分离出来或从视图中隐藏起来），返回值与 `Node.textContent` 属性相同。

**警告：** 在一个节点上设置 `innerText` 会移除该节点的*所有*子节点，并用给定的字符串值的单一文本节点代替它们。

示例
--

这个示例对比了 `innerText` 和 `Node.textContent`。请注意 `innerText` 是如何意识到像 `<br>` 这样的元素，并忽略了隐藏的元素的。

### HTML


```html
<h3>源元素：</h3>
<p id="source">
  <style>
 #source {
 color: red;
 }
 #text {
 text-transform: uppercase;
 }
 </style>
  <span id="text">
    来看看<br />
    这段文字<br />
    在下方怎么表示。
  </span>
  <span style="display:none">隐藏文字</span>
</p>
<h3>textContent 结果：</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>innerText 结果：</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>
```

### JavaScript


```js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement.click()
===================

**`HTMLElement.click()`** 方法可以用来模拟鼠标左键单击一个元素。

 当在支持 `click()` 方法的元素上使用该方法（例如
 `<input>`) ，将会产生该元素的一个点击事件。这个事件会冒泡上升到文档树（或事件链）中更高的元素，并触发它们的点击事件。

语法
--


```js
click()
```

示例
--

当鼠标移动过复选框时模拟一个点击事件：

### HTML


```html
<form>
  <input
 type="checkbox"
 id="myCheck"
 onmouseover="myFunction()"
 onclick="alert('click event occurred')" />
</form>
```

### JavaScript


```js
// 当鼠标滑过（mouse-over）执行 myFunction
function myFunction() {
  document.getElementById("myCheck").click();
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-click-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 有关的事件处理
    + `GlobalEventHandlers.onclick`
    + `GlobalEventHandlers.ondblclick`
    + `GlobalEventHandlers.onauxclick`