HTML - optimum 属性_HTML 菜鸟教程

HTML optimum 属性用于指定仪表值被视为最优值的范围。

此属性必须在该范围内（由 min 属性和 max 属性定义）。例如，如果要创建一个仪表来显示 CPU 温度，则可以将最小值设置为 30，将最大值设置为 100，将最佳值设置为 60。这在视觉上表明，60 摄氏度左右的温度被认为是理想的

浏览器将根据值是否小于或等于最佳值来更改仪表条的颜色。

语法

<meter optimum="value"></meter>

其中 value 是一个浮点数，表示仪表的最优值。

适用于

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

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

HTML optimum 属性的示例

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

在high 和 low 之间实现最佳值

在以下示例中，我们将注意到各种最佳值的仪表条的颜色变化。

<!DOCTYPE html>
<html>
<body>
	 <h2> HTML optimum attribute </h2>
	 <p>optimum value below low and high:
	 <meter value="0.6" 
					max="0.9" 
					min="0.1"
					optimum="0.1" 
					high="0.5" 
					low="0.2">
	 </meter>
	 </p>
	 <p>optimum value between low and high:
	 <meter value="0.6" 
					max="0.9" 
					min="0.1"
					optimum="0.3" 
					high="0.5" 
					low="0.2">
	 </meter>
	 </p>

	 <p>optimum value above low and high:
	 <meter value="0.6" 
				 max="0.9" 
				 min="0.1"
				 optimum="0.7" 
				 high="0.5" 
				 low="0.2">
	 </meter>
	 </p>
</body>
</html>

根据最优值操纵仪表元素的值。

考虑到另一种情况，我们将在其中运行脚本以及最佳属性。在这里，用户可以动态减少值以达到目标。

<!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 - open 属性 HTML - pattern 属性 >>