recursal/MDN huggingface dataset:
ResizeObserver.observe()
========================

`ResizeObserver` 接口的 **`observe()`** 方法用于监听指定的 `Element` 或 `SVGElement`。

语法
--


```js
observe(target)
observe(target, options)
```

### 参数

`target`

对要监听的 `Element` 或 `SVGElement` 的引用。

`options` 可选

一个可选的对象，允许你为监听的对象设置参数。目前，这只有一个参数：

`box`

设置 observer 将监听的盒模型。可能的值是：

`content-box`（默认）

CSS 中定义的内容区域的大小。

`border-box`

CSS 中定义的边框区域的大小。

`device-pixel-content-box`

在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位。


### 返回值

无（`undefined`）。

### 异常

无。

示例
--

以下片段取自 resize-observer-text.html（见源码）示例：


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```


带有一个可选的对象的 `observe()` 看起来像这样：


```js
resizeObserver.observe(divElem, { box: "border-box" });
```

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-observe |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ResizeObserver.unobserve()
==========================

`ResizeObserver` 接口的 **`unobserve()`** 方法结束对指定的 `Element` 或 `SVGElement` 的监听。

语法
--


```js
unobserve(target)
```

### 参数

`target`

对不要监听的 `Element` 或 `SVGElement` 的引用。

### 返回值

无（`undefined`）。

### 异常

无。

示例
--

以下片段取自 resize-observer-text.html（见源码）示例：


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
```

参考
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-unobserve |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ResizeObserver()
================

**`ResizeObserver`** 构造函数创建一个新的 `ResizeObserver` 对象，它可以用于监听 `Element` 内容盒或边框盒或者 `SVGElement` 边界尺寸的大小。

语法
--


```js
new ResizeObserver(callback)
```

### 参数

`callback`

每当观测的元素调整大小时，调用该函数。该函数接收两个参数：

`entries`

一个 `ResizeObserverEntry` 对象数组，可以用于获取每个元素改变后的新尺寸。

`observer`

对 `ResizeObserver` 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听，但如果你不需要它，可以省略它。

回调通常遵循以下模式：


```js
function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}
```


示例
--

以下片段取自 resize-observer-text.html（见源码）示例：


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        // legacy path
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-resizeobserver |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ResizeObserver.disconnect()
===========================

`ResizeObserver` 接口的 **`disconnect()`** 方法取消所有的对 `Element` 或 `SVGElement` 目标的监听。

语法
--


```js
disconnect()
```

### 参数

无。

### 返回值

无（`undefined`）。

### 异常

无。

示例
--


```js
btn.addEventListener("click", () => {
  resizeObserver.disconnect();
});
```

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-disconnect |

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

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

**`contentWindow`** 属性返回当前HTMLIFrameElement的Window对象。你可以使用这个`Window` 对象去访问这个 iframe 的文档和它内部的 DOM. 这个是可读属性，但是它的属性像全局`Window` 一样是可以操作的。

关于 contentWindow 的示例
--------------------


```js
var x = document.getElementsByTagName("iframe")[0].contentWindow;
//x = window.frames[0];

x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
// this would turn the 1st iframe in document blue.
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-iframe-contentwindow |

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

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

该 **`Text.wholeText`** 只读属性返回`Text` (en-US)逻辑上相邻的节点的所有文本。文本按文档顺序连接。这允许指定任何文本节点并获取所有相邻文本作为单个字符串。

Syntax
------
```

str = textnode.wholeText;
```

Notes and example
-----------------

假设你的网页上有如下的简单文本 (包括其中为了格式化代码而添加的一些空格), 其 DOM 节点 被储存在变量 `para` 中：


```html
<p>
  Thru-hiking is great! <strong>No insipid election coverage!</strong> However,
  <a href="http://en.wikipedia.org/wiki/Absentee\_ballot">casting a ballot</a> is
  tricky.
</p>
```


你觉得你不喜欢中间的句子，所以你移除了它：


```js
para.removeChild(para.childNodes[1]);
```


过了一会，你又决定给“Thru-hiking is great, but casting a ballot is tricky.”这句换个说法，*同时保留超链接*。所以你尝试以下代码：


```js
para.firstChild.data = "Thru-hiking is great, but ";
```


一切妥当，是么？*不!* 这会使你移除 `strong` 元素，而被删掉的句子分隔了两个文本节点。一个是第一句，一个是最后一个单词。相反，你现在获得如下效果：


```html
<p>
  Thru-hiking is great, but However,
  <a href="http://en.wikipedia.org/wiki/Absentee\_ballot">casting a ballot</a> is
  tricky.
</p>
```


实际上，你更倾向于将这些相邻扽文本节点作为同一文本节点。这就是 `wholeText` 的用武之地：如果你有许多相邻的文本节点，你可以通过`wholeText`访问这些节点里的所有内容。让我们假设你从未犯过最后一个错误。在这种情况下，我们有：


```js
assert(para.firstChild.wholeText == "Thru-hiking is great! However, ");
```


`wholeText` 只是文本节点的一个属性，特可以返回连接了所有相邻 (i.e. 没有被其他元素边界分开) 文本节点数据的字符串。

现在让我们回到最初的问题。我们想做的是用新的文本替代旧的文本。这就是 `replaceWholeText()` (en-US) 用处所在：


```js
para.firstChild.replaceWholeText("Thru-hiking is great, but ");
```


我们移除了所有的相邻文本节点 (所有构成 whole text 的文本节点) 除了调用`replaceWholeText()` 的，并且把剩余的文本改成了新文本。我们现在所得到的是这样的：


```html
<p>
  Thru-hiking is great, but
  <a href="http://en.wikipedia.org/wiki/Absentee\_ballot">casting a ballot</a> is
  tricky.
</p>
```


有时候使用 whole-text 功能同时使用`Node.textContent` 或长期支持的 `Element.innerHTML`; 可以得到更好的处理。如果你需要处理一个元素内的混合内容，正如本文所介绍的，`wholeText` 和 `replaceWholeText()` 是有用的。

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-wholetext① |

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

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

See also
--------

* The `Text` (en-US) interface it belongs to.
Text.splitText()
================

**`Text.splitText()`** 方法可以根据指定的偏移量将一个 `Text` (en-US) 节点分割成前后两个独立的兄弟节点。

如果指定的偏移量刚好等于原文本节点所包含字符串的长度，则返回一个内容为空的文本节点。

分割后的文本节点还可以使用`Node.normalize`方法来合并。

语法
--
```

newNode = textNode.splitText(offset)
```

### 参数

`offset`

在中断文本节点前的索引。

### 返回值

返回一个新创建的 `Text` (en-US) 节点，该节点包含了 the text after the specified offset point.

### 异常

INDEX\_SIZE\_ERR

如果指定的偏移量小于 0 或者大于原文本节点中所包含字符串的长度，则抛出这个异常。

NO\_MODIFICATION\_ALLOWED\_ERR

如果，原文本节点只读，则抛出这个异常。

示例
--

下面的例子中，一个 `<p>` 元素所包含的文本节点将会被分割成两个文本节点，然后在这两个节点中间插入一个 `<span>` 元素。

### HTML


```html
<p id="p">foobar</p>
```

### JavaScript


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

// 将 <p> 的内容读取为一个文本节点
const foobar = p.firstChild;

// 将原来的文本节点分割成为内容分别为 foo 和 bar 的两个文本节点
const bar = foobar.splitText(3);

// 创建一个包含了内容为 ' new content ' 的文本节点的 <u> 元素
const u = document.createElement("u");
u.appendChild(document.createTextNode(" new content "));

// 将 <u> 元素插入到后一个文本节点 'bar' 的前面
p.insertBefore(u, bar);

// 现在，HTML 结构就变成了 <p id="p">foo <span>span contents</span> bar</p>
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-splittext① |

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

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

参见
--

* The `Text` (en-US) interface it belongs to.
* The opposite method: `Node.normalize`.
Text：Text() 构造函数
================

**`Text()`** 构造函数返回一个新创建的 `Text` (en-US) 对象，其文本内容为参数中给出的可选字符串。

语法
--


```js
new Text()
new Text(string)
```

### 参数

* `string` 可选
### 返回值

一个新的 `Text` (en-US) 对象，包含参数 `string` 的内容，如果没有给定参数，则为空字符串。

示例
--


```js
let text = new Text("Test");
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-text-text① |

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

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

参见
--

* DOM API
HTMLSlotElement.assignedSlot
============================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`assignedSlot`** 是 `Text` (en-US) 接口的属性，返回与该元素相关联的`HTMLSlotElement` .

Syntax
------
```

var htmlSlotElement = text.assignedSlot
```

### Value

一个 `HTMLSlotElement` 对象。

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-slotable-assignedslot |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaQueryListEvent()
=====================

**`MediaQueryListEvent()`** 构造函数用于创建一个新的 `MediaQueryListEvent` 对象。

语法
--


```js
new MediaQueryListEvent(type)
new MediaQueryListEvent(type, options)
```

### 参数

`type`

一个带有该事件名字的字符串。该字符串是大小写敏感的，且浏览器通常将其设置为 `change`。

`options` 可选

一个对象，*除已定义在 `Event()`的属性外*，其还可以添加如下额外属性：

`media` 可选

一个字符串，代表着一个序列化后的媒体查询。默认值为 `""`。

`matches` 可选

一个布尔值，代表着匹配媒体查询状态；如果匹配，该值为 `true`，否则为 `false`。默认值为 `false`。


### 返回值

一个新的 `MediaQueryListEvent` 对象。

示例
--


```js
var media = "(max-width: 600px)";
var matches = true;

var myMediaQueryListEvent = new MediaQueryListEvent("change", {
  media,
  matches,
});
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylistevent-mediaquerylistevent |

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

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

参见
--

* 媒体查询
* 在代码中使用媒体查询
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
Clipboard：write() 方法
====================

`Clipboard` 的方法 **`write()`** 写入图片等任意的数据到剪贴板。这个方法可以用于实现剪切和复制的功能。

当页面位于活动选项卡中时，权限 API (en-US) 中的 `"clipboard-write"` 权限会自动授予该页面。

**备注：** 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查浏览器兼容性和剪贴板可用性以获得更多的兼容性信息。

**备注：** 为了与 Google Chrome 浏览器保持一致，Firefox 只允许此函数处理文本、HTML 和 PNG 数据。

语法
--


```js
write(data)
```

### 参数

`data`

包含要写入剪贴板的数据的 `ClipboardItem` (en-US) 对象数组。

### 返回值

当数据被写入到剪贴板的时候，`Promise` resolve 回调被执行。如果剪贴板不能完成剪贴操作，`Promise` reject 回调被执行。

示例
--

以下示例代码将展示如何将剪贴板的内容替换为指定的字符串。


```js
function setClipboard(text) {
  const type = "text/plain";
  const blob = new Blob([text], { type });
  const data = [new ClipboardItem({ [type]: blob })];

  navigator.clipboard.write(data).then(
    () => {
      /\* success \*/
    },
    () => {
      /\* failure \*/
    },
  );
}
```


代码首先创建了一个新的 `Blob` 对象，需要使用该对象来构造 `ClipboardItem` (en-US) 对象，并将其发送到剪贴板。`Blob` 构造函数接收我们要复制的内容及类型，一个 `Blob` 对象可以有不同的来源，例如 canvas。

接下来，我们创建一个新的 `ClipboardItem` (en-US) 对象，并在其中放置 blob，以写入到剪贴板。传递给 `ClipboardItem` (en-US) 构造函数的对象的键名表示内容类型，值表示内容。然后调用 `write()`，并指定复制成功和失败的回调函数。

### 复制 canvas 内容至剪贴板的示例


```js
function copyCanvasContentsToClipboard(canvas, onDone, onError) {
  canvas.toBlob((blob) => {
    let data = [new ClipboardItem({ [blob.type]: blob })];

    navigator.clipboard.write(data).then(
      () => {
        onDone();
      },
      (err) => {
        onError(err);
      },
    );
  });
}
```


**备注：** 一次只能传入一个剪贴板项目。

规范
--

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-write |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Clipboard.writeText()
=====================

`Clipboard` 接口的 **`writeText()`** 方法可以写入特定字符串到操作系统的剪切板。

**备注：** 规范要求在写入剪贴板之前使用 Permissions API (en-US) 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的 API。有关详细信息，请查看浏览器兼容性和剪贴板可用性。

语法
--
```

var promise = navigator.clipboard.writeText(newClipText)
```

### 参数

`newClipText`

The `DOMString` to be written to the clipboard.

### 返回值

一个`Promise` ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）

例子
--

此示例将剪贴板的内容设置为字符串“<empty clipboard>”。


```js
navigator.clipboard.writeText("<empty clipboard>").then(
  function () {
    /\* clipboard successfully set \*/
  },
  function () {
    /\* clipboard write failed \*/
  },
);
```

规范
--

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-writetext |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Clipboard.readText()
====================

**`Clipboard`** 接口的 **`readText()`** 方法解析系统剪贴板的文本内容返回一个`Promise` 。

语法
--
```

var promise = navigator.clipboard.readText()
```

### 参数

None.

### 返回值

A `Promise` that resolves with a `DOMString` containing the textual contents of the clipboard. Returns an empty string if the clipboard is empty, does not contain text, or does not include a textual representation among the `DataTransfer` objects representing the clipboard's contents.

要从剪贴板中读取非文本内容，请改用`read()` (en-US)方法。你可以使用 `writeText()`将文本写入剪贴板

例子
--

此示例检索剪贴板的文本内容，并将返回的文本插入元素的内容中。


```js
navigator.clipboard
  .readText()
  .then((clipText) => (document.getElementById("outbox").innerText = clipText));
```

规范
--

| Specification |
| --- |
| Clipboard API and events # dom-clipboard-readtext |

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

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

See also
--------

* Clipboard API
* `Clipboard.writeText()`
* `Clipboard.write()`
GlobalEventHandlers.oncuechange
===============================

**`oncuechange`** 属性属于 `GlobalEventHandlers`，是一个处理 `cuechange` 事件的事件处理器。当`TextTrack` (en-US)更改了当前显示的提示时，`cuechange` 事件将会触发。

语法
--


```js
element.oncuechange = handlerFunction;
var handlerFunction = element.oncuechange;
```


`handlerFunction` 可以为 `null`，也可以是一个处理指定事件的JavaScript 函数。

规范
--

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-texttrack-oncuechange |

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

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

查看更多
----

* `cuechange`
* DOM 事件处理函数 (en-US)
Storage.clear()
===============

`Storage` 接口的 **`clear()`** 方法清除给定 `Storage` 对象中存储的所有键。

语法
--


```js
clear()
```

### 参数

无。

### 返回值

无 (`undefined`)。

示例
--

下面的函数在本地存储里面创建三个数据项，然后使用 `clear()` 把它们全部移除。


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "miGato.png");

  localStorage.clear();
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-clear-dev |

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

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

相关链接
----

使用 Web Storage API
Storage.removeItem()
====================

`Storage` 接口的 **`removeItem()`** 方法，当传递一个键名时，将从给定的 `Storage` 对象中删除该键（如果它存在）。Web Storage API 的 **`Storage`** 接口提供对特定域的会话或本地存储的访问。

如果没有与该给定键名匹配的项，则此方法将不执行任何操作。

语法
--


```js
removeItem(keyName)
```

### 参数

`keyName`

一个包含你要删除的键名字符串。

### 返回值

无 (`undefined`)。

示例
--

下面的函数在本地存储里面创建三个数据项，然后把 `image` 数据项移除。


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```


我们可以为 session storage 做同样的事情。


```js
function populateStorage() {
  sessionStorage.setItem("bgcolor", "red");
  sessionStorage.setItem("font", "Helvetica");
  sessionStorage.setItem("image", "myCat.png");

  sessionStorage.removeItem("image");
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

相关链接
----

使用 Web Storage API
Storage.setItem()
=================

`Storage` 接口的 **`setItem()`** 方法，当传递了一个键名和值时，将会把键名添加到给定的 `Storage` 对象中，如果键名已存在，则更新其对应的值。

语法
--


```js
setItem(keyName, keyValue)
```

参数
--

`keyName`

包含要创建或更新的键名字符串。

`keyValue`

包含要创建或更新的键名对应的值字符串。

### 返回值

无 `undefined`。

### 异常

在存储已满的情况下，调用 `setItem()` 可能会抛出异常。开发人员应**始终捕获 `setItem()` 可能抛出的异常**。

示例
--

下面的函数在本地存储中创建三个数据项。


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-setitem-dev |

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

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

参见
--

* Storage.getItem()
* Storage.removeItem()
* 使用 Web Storage API
Storage.getItem()
=================

`Storage` 接口的 **`getItem()`** 方法，当传递一个键名时，将返回该键的值；而如果在给定的 `Storage` 对象中不存在该键，则返回 `null`。

语法
--


```js
getItem(keyName)
```

### 参数

`keyName`

一个包含你要检索的键名字符串。

### 返回值

一个包含键值的字符串。如果该键名不存在，则返回 `null`。

示例
--

下面的函数从本地存储中获取三个数据项，然后使用他们在页面上设置自定义样式：


```js
function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-getitem-dev |

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

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

相关链接
----

使用 Web Storage API
Storage.length
==============

`Storage` 接口的只读属性 **`length`** 返回存储在一个给定的 `Storage` 对象中的数据项的数量。

值
-

`Storage` 对象中存储的数据项数量。

示例
--

下面的函数添加三个数据项到当前域名的本地存储里面，然后返回本地存储里面数据项的数量：


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  return localStorage.length; // 应该返回 3
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

相关链接
----

使用 Web Storage API
Storage.key()
=============

`Storage` 接口的 **`key()`** 方法，当传递一个数字 n 时，返回给定存储对象中第 n 个键的名称。键的顺序取决于用户代理，所以你不应该依赖它。

语法
--


```js
key(index)
```

### 参数

`index`

一个整数，表示要获取的键名索引。这是一个从零开始的索引。

### 返回值

包含键名称的字符串。如果索引不存在，则返回 `null`。

示例
--

下面的函数遍历本地存储键：


```js
function forEachKey(callback) {
  for (let i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```


下面的函数遍历本地存储键，并获得每个键的设定值：


```js
for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

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

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

相关链接
----

使用 Web Storage API
HTMLDetailsElement: toggle event
================================

当`<details>`元素`打开`/`关闭`状态被切换时，切换事件会触发。

| Bubbles | No |
| --- | --- |
| Cancelable | No |
| Interface | `Event` |
| Event handler property | None |
| Default Action | Toggles the `open` state of the `<details>` element. |

示例
--

此示例记录打开的章节。当章节关闭时，它们将从日志中删除。

### HTML


```html
<aside id="log">
  <b>Open chapters:</b>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>
<section id="summaries">
  <b>Chapter summaries:</b>
  <details id="ch1">
    <summary>Chapter I</summary>
    Philosophy reproves Boethius for the foolishness of his complaints against
    Fortune. Her very nature is caprice.
  </details>
  <details id="ch2">
    <summary>Chapter II</summary>
    Philosophy in Fortune's name replies to Boethius' reproaches, and proves
    that the gifts of Fortune are hers to give and to take away.
  </details>
  <details id="ch3">
    <summary>Chapter III</summary>
    Boethius falls back upon his present sense of misery. Philosophy reminds him
    of the brilliancy of his former fortunes.
  </details>
</section>
```

### CSS


```css
body {
  display: flex;
  flex-direction: row-reverse;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}
```

### JavaScript


```js
function logItem(e) {
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # event-toggle |

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

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

概述
**cssText** 返回样式规则所包含的实际文本。想要能够动态的设置一个样式表规则，查看使用动态样式信息。 (en-US)

语法
--
```

string = cssRule.cssText
```

例子
--


```html
<style>
 body {
 background-color: darkblue;
 }
</style>
<script>
 var stylesheet = document.styleSheets[0];
 alert(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; }
</script>
```

规范
--

* DOM Level 2 Style CSS - Interface CSSStyleRule (introduced in DOM Level 2)
CSSRule.parentStyleSheet
========================

### 概述

**parentStyleSheet** 返回在当前规则中已定义的样式表对象。

### 语法
```

stylesheet = cssRule.parentStyleSheet
```

### 参数

* `stylesheet`是一个样式表对象。
### 例子
```

if ( bgRule.parentStyleSheet != mySheet ) {
   // alien style rule!
}
```

### 备注

查看 Gecko DOM Reference:event#DOM\_styleSheet\_Object 有关样式表的对象接口的详细信息。

### 规范

DOM Level 2 Style - cssRule