JavaScript Meter对象(Meter Object)

Meter对象是HTML5中新添加对象。

Meter对象代表了HTML文档中的meter元素

注:IE、Safari5不支持meter元素。

如何访问Meter对象?

使用getElementById()访问meter元素。

var  x = document.getElementById("myMeter");

如何创建Meter对象

使用createElement()方法创建meter元素。

var x = document.createElement("meter");
Meter对象的属性
属性 说明
high 设置或返回尺规的hight属性的值
labels 返回尺规上含有的label元素的列表
low 设置或返回尺规的low属性的值
max 设置或返回尺规的max属性的值
min 设置或返回尺规的min属性的值
optimum 设置或返回尺规的optimum属性的值
value 设置或返回尺规的value属性的值

标准属性及事件

meter对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问 METER元素?</h3>

<p>王一民的得分: <meter id="myMeter" min="0" low="40" high="95" max="100" value="65"></meter></p>

<p>点击以下按钮,获取以上尺规的值</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myMeter").value;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>点击以下按钮,创建一个METER元素,并指定值</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.createElement("METER");

x.setAttribute("min", "0");

x.setAttribute("max", "100");

x.setAttribute("value", "65");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容