HTML - high 属性

HTML high 属性用于提及一个值，该值被认为是仪表元素的high 属性。当值超过上限时，它的显示方式会有所不同。

此属性值必须小于最大值（max 属性），并且必须大于最小值和最小值（min 属性、low 属性）。如果未在 meter 元素中指定它，或者其值大于最大值（max 属性），则high 属性值将等于最大值。

语法


<meter high= "number"></meter>

适用于

下面列出的元素允许使用 HTML high 属性

元素	描述
<meter>	HTML <meter> 标签用于渲染给定范围内的数据。

HTML high 属性示例

以下示例将说明 HTML high 属性，我们应该在何处以及如何使用此属性！

定义high 属性

在以下示例中，我们将创建一个仪表元素，在其中将最高值设置为 80。


<!DOCTYPE html>
<html lang="en">
<body>
		<h3>HTML high Attribute</h3>
		<label for="server-load">Room 1: Server Load</label> 
		<meter id="server-load" value="96" min="0" max="100" 
					 low="50" high="90" optimum="0.5">
		</meter>
</body>

</html>

标签的颜色取决于high 属性

在以下示例中，我们将 high 属性与 meter 标签一起使用。在输出中，如果“value”属性的值介于高和低之间，则结果条将为绿色。


<!DOCTYPE html>
<html lang="en">
<body>
		<h3>HTML high Attribute</h3>
		<label for="server-load">Room 1: Server Load</label> 
		<meter id="server-load" value="0.7" min="0" max="1" 
					 low="0.3" high="0.8" optimum="0.5">
		</meter>
		<br>
		<label for="server-load">Room 2: Server Load</label> 
		<meter id="server-load" value="0.9" min="0" max="1" 
					 low="0.3" high="0.8" optimum="0.5">
		</meter>
		<br>
		<label for="server-load">Room 3: Server Load</label> 
		<meter id="server-load" value="0.1" min="0" max="1" 
					 low="0.3" high="0.8" optimum="0.5">
		</meter>
	  
</body>

</html>

操纵元素的high 属性值。

考虑到另一种情况，我们将在其中运行脚本以及high 属性。在这里，用户可以动态地增加价值以达到目标。


<!DOCTYPE html>
<html lang="en">

<head>
		<title>HTML 'high' attribute</title>
</head>

<body>
		<!--HTML 'high' attribute-->
		<p>Example of the HTML 'high' attribute</p>
		<fieldset>
				<legend>Meter-high</legend> 
				<label for="">Rahul's Work Load</label> 
				<meter high="70" low="45" min="0" 
							 max="100" value="70" id='rahul'>
				</meter>
				<br><br>
				<span id='res'>Average Workload</span>
				<br><br> 
				<button onclick="Increase()">Add Tasks</button>
				<p>Add more tasks</p>
		</fieldset>
		<script>
				function Increase() {
						var h = document.getElementById('rahul');
						var work = h.value;
						h.value = 90;
						var res = document.getElementById('res');
						res.innerHTML = "Your workload has increased from " 
						+ work + " to " + h.value;
				}
		</script>
</body>

</html>

支持的浏览器

浏览器
是否支持	8.0	No	6.0	6.0	11.0

打印本页