HTML meter 元素和 progress 元素

H5 标量度量元素和进度条元素的区别测试

发布用户:小梦

2022/12/29 17:38


两元素在 HTML 规范定义文档中的链接地址:meterprogress

据有关文档介绍,meter 元素用来显示已知范围的标量值或者分数值,例如磁盘使用量、查询结果的相关性,或已选择特定候选人的投票人的分数;progress 元素表示任务的完成进度,该进度要么不确定,即指示任务正在进行,但不清楚在任务完成前还有多少工作要做(例如因为该任务正在等待远程主机响应),要么该进度是零到最大值范围内的一个数字,这提供了迄今为止已完成的工作的分数。

此篇文章使用了代码示例来测试两元素在浏览器中的显示效果与区别。

假设两元素使用同样的样式代码:

<style>
    meter, progress {
        display: block;
        height: 24px;
        width: 100%;
    }
</style>

 

假设两元素与属性设置如下:

<meter value="50" max="100" low="60" high="80"></meter>
<meter value="70" max="100" low="60" high="80"></meter>
<meter value="90" max="100" low="60" high="80"></meter>
<br />
<progress></progress>
<progress max="100" value="50"></progress>

 

meter 元素还有个特有属性 optimum,MDN 文档说此属性指示最优数值,仿佛和区间取值有关,笔者我完全不清楚这个最优属性是什么意思。

以上代码在 Microsoft Edge 版本 108.0.1462.54 (正式版本) (64 位) 浏览器中的效果图如下:

由此可见,meter 元素和 progress 元素在呈现效果上有很大的相似性,两者都像是进度条效果,不同的是 meter 元素在 Edge 浏览器中能够根据一定的属性值呈现不同的颜色效果,可能更加适用于值确定的场景,正如有关文档介绍的那样,meter 元素可用于表示磁盘空间使用情况;而 progress 元素有一个不确定值的状态,可用于表示不确定的等待场景,比如加载中这种情形。

笔者注:似乎这两个元素不支持常用的样式更改,比如颜色、边框,目前测试只有宽高大小的 CSS 属性比较正常。在实际的应用场景中可能并不会直接使用这两个元素,因为交互效果、动画、颜色样式,甚至是不同的浏览器可能呈现的效果都会不一致,所以真正的业务场景可能需要自定义效果,而不是直接用这两个元素。



代码写多了,脑力不够用了,请我喝杯咖啡提提神 ☕

警告!禁止网络诈骗、非法集资、非法套现等法律外的缘由转账汇款,你的赞赏转账请考虑再三后支付,此收款不作任何形式的退款。





金额:

* 支付宝支付后如果没有自动返回请手动返回此页并刷新。



* 在线内容服务不支持任何形式的退款/退费操作;支付后的订单记录可以在“用户主页 - 用户订单中心”查看。

此网站可能不完全兼容您目前的浏览器!
此页随时可能被替换下线,请不要依赖此页功能!
此页正在维护更新,可能会出现错误或卡顿。
通知 & 公告

暂时还没有消息