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 |