Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: create docs for HTMLMeterElement #23047

Merged
merged 4 commits into from
Aug 25, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions files/zh-cn/web/api/htmlmeterelement/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
title: HTMLMeterElement
slug: Web/API/HTMLMeterElement
l10n:
sourceCommit: ec8d5627e822d866f350d9d8c06f0df58948015e
---

{{APIRef("HTML DOM")}}

HTML {{HTMLElement("meter")}} 元素暴露 **`HTMLMeterElement`** 接口,其提供特性的属性和方法(除了 {{domxref("HTMLElement")}} 对象接口之外,它还可以通过继承来使用),用于操作 {{HTMLElement("meter")}} 元素的布局和展现。
yin1999 marked this conversation as resolved.
Show resolved Hide resolved

{{InheritanceDiagram}}

## 实例属性

_也继承了其父接口 {{domxref("HTMLElement")}} 的属性。_
fuchunhui marked this conversation as resolved.
Show resolved Hide resolved

- {{domxref("HTMLMeterElement.high")}}
- : 一个 `double` 表示高边界的值,反映 [`high`](/zh-CN/docs/Web/HTML/Element/meter#high) 属性。
- {{domxref("HTMLMeterElement.low")}}
- : 一个 `double` 表示低边界的值,反映 [`low`](/zh-CN/docs/Web/HTML/Element/meter#low) 属性。
- {{domxref("HTMLMeterElement.max")}}
- : 一个 `double` 表示最大值,反映 [`max`](/zh-CN/docs/Web/HTML/Element/meter#max) 属性。
- {{domxref("HTMLMeterElement.min")}}
- : 一个 `double` 表示最小值,反映 [`min`](/zh-CN/docs/Web/HTML/Element/meter#min) 属性。
- {{domxref("HTMLMeterElement.optimum")}}
- : 一个 `double` 表示最优值,反映 [`optimum`](/zh-CN/docs/Web/HTML/Element/meter#optimum) 属性。
- {{domxref("HTMLMeterElement.value")}}
- : 一个 `double` 表示当前值,反映 [`value`](/zh-CN/docs/Web/HTML/Element/meter#value) 属性。
- {{domxref("HTMLMeterElement.labels")}} {{ReadOnlyInline}}
- : 与此元素关联的 {{HTMLElement("label")}} 元素的 {{domxref("NodeList")}}。

## 实例方法

_此接口无具体方法,但继承了其父接口 {{domxref("HTMLElement")}} 的方法。_

## 规范

{{Specifications}}

## 浏览器兼容性

{{Compat}}

## 参见

- 实现此接口的 HTML 元素:{{HTMLElement("meter")}}
45 changes: 45 additions & 0 deletions files/zh-cn/web/api/htmlmeterelement/labels/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: HTMLMeterElement:labels 属性
slug: Web/API/HTMLMeterElement/labels
l10n:
sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3
---

{{APIRef("DOM")}}

**`HTMLMeterElement.labels`** 只读属性返回与 {{HTMLElement("meter")}} 元素有关联的 {{HTMLElement("label")}} 元素的 {{domxref("NodeList")}}。

## 值

一个 {{domxref("NodeList")}},包含与 `<meter>` 元素关联的 `<label>` 元素。

## 示例

### HTML

```html
<label id="label1" for="test">Label 1</label>
fuchunhui marked this conversation as resolved.
Show resolved Hide resolved
<meter id="test" min="0" max="100" value="70">70</meter>
<label id="label2" for="test">Label 2</label>
fuchunhui marked this conversation as resolved.
Show resolved Hide resolved
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
const meter = document.getElementById("test");
for (const label of meter.labels) {
console.log(label.textContent); // "Label 1" 和 "Label 2"
fuchunhui marked this conversation as resolved.
Show resolved Hide resolved
}
});
```

{{EmbedLiveSample("示例", "100%", 30)}}

## 规范

{{Specifications}}

## 浏览器兼容性

{{Compat}}