html - meter 元素中的 low、high 和 optimum 属性到底有什么作用？

Question

MDN 也使用这些属性的名称来描述它们，因此并没有真正解释它们。它们似乎真的没有默认功能，所以我假设 min 和 max 需要与它们一起使用。浏览器是否以某种方式使用它们，或者它们的唯一目的是与 javascript 一起使用？除了宽度和高度之外，还可以设置仪表的样式吗？

<meter min="0" low="30"  value="50" optimum="50" high="80" max="100" >
    What is their use?
</meter>

Answer 1

这三个属性 high, low, optimum 没有任何如此显着的影响，但会影响仪表的颜色这些属性的值和值。颜色在 yellow、red、green 之间变化。下面是一个小演示。

<h3>
  Values Without optimum value
</h3>

Value between low and high:<meter value=50 min=0 max=100 low=30 high=90></meter><br> Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90></meter><br> Value greater than high and less than max:<meter value=95 min=0 max=100 low=30 high=90></meter><br> Value equal to high :<meter value=90 min=0 max=100 low=30 high=90></meter><br> Value equal to low :<meter value=30 min=0 max=100 low=30 high=90></meter><br> 
Value greater than high and less than max :<meter value=95 min=0 max=100 low=30 high=90></meter><br> 
MDN Example: value is greater than high:<meter min=0 low=69 high=80 max=100 value=84></meter>


<h3>
  Values With optimum value Greater Than high
</h3>

Value between low and high:<meter value=50 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90 optimum=95></meter><br> Value greater than high and less than max: <meter value=95 min=0 max=100 low=30 high=90 optimum=95></meter><br>
Value equal to high :<meter value=90 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value equal to low :<meter value=30 min=0 max=100 low=30 high=90 optimum=95></meter><br> 
Value greater than high and less than max :<meter value=95 min=0 max=100 low=30 high=90 optimum=95></meter><br>

  <h3>
    Values With optimum value Less Than high
  </h3>

  Value between low and high:<meter value=50 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value less than low and greater than min:<meter value=25 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value greater than high and less than max:
  <meter value=95 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value equal to high :<meter value=90 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value equal to low :<meter value=30 min=0 max=100 low=30 high=90 optimum=85></meter><br> 
  Value greater than high and less than max :<meter value=95  min=0 max=100 low=30 high=90 optimum=85></meter><br>

在上面的演示中，您可以根据其值和 low-high 范围观察仪表颜色之间的差异。虽然我认为仍然存在不一致，因为您可以看到第一组中的最后两个仪表的值都大于 high 值，但颜色仍然不同。

即使在谷歌搜索上花费数小时后，我也无法获得这些属性的确切解释。但以上是我发现的。

希望对你有帮助:)