HTML - low 属性_HTML 菜鸟教程

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

它是测量范围下端的数值上限。下限属性的值必须大于最小值（即最小属性），并且小于较高值和最大值（即 high 属性、最大属性）。

如果未在 <meter> 标签内使用或小于最小值，则 low 属性值将等于最小值。

语法

<meter low= "value"></meter>

适用于

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

元素	描述
<meter>	HTML <low> 标签用于在给定范围内呈现数据。

HTML low 属性的示例

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

标签定义low 属性

在以下示例中，我们将创建一个仪表元素，并将low 属性值设置为小于最小值。

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

</html>

标签颜色取决于low 属性

考虑到另一种情况，这里我们使用带有仪表标签的low 属性。在输出中，如果“value”属性的值介于高和低之间，则结果条将为绿色。

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

<body>
	 <h3>HTML low 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">
	 </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" >
	 </meter>
	 <br>
	 <label for="server-load">
			Room 3: Server Load
	 </label> 
	 <meter id="server-load" 
						value="0.2" 
						min="0" 
						max="1" 
						low="0.3" 
						high="0.8">
	 </meter>
</body>

</html>

操作元素的low 属性

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

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

<body>
	 <p>Example of the 'low' attribute</p>
	 <fieldset>
			<legend>Meter-high</legend> 
			<label for="">Rahul's Work Load</label> 
			<meter high="70" 
						 low="30" 
						 min="0" 
						 max="100" 
						 value="75" 
						 id='rahul'>
			</meter>
			<br><br>
			<span id='res'>
				 Above Average Workload
			</span>
			<br><br> 
			<button onclick="decrease()">
						Reduce Tasks
			</button>
	 </fieldset>
	 <script>
			function decrease() {
				 var h = document.getElementById('rahul');
				 var work = h.value;
				 h.value = h.value - 10;
				 var res = document.getElementById('res');
				 res.innerHTML = 
				 "Rahul's workload has decreased from "
				 + work + " to " + h.value;
			}
	 </script>
</body>

</html>

支持的浏览器

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

<< HTML - list 属性 HTML - max 属性 >>