- HTML 教程
- HTML 教程
- HTML - 简介
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块和内联元素
- HTML - 样式表
- HTML - 文本格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图像
- HTML - 图像映射
- HTML - iframe
- HTML - 短语标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表格标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 电子邮件链接
- HTML 颜色名称和值
- HTML - 颜色名称
- HTML - RGB 和 RGBA 颜色
- HTML - 十六进制颜色
- HTML - HSL 和 HSLA 颜色
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 标头
- HTML - 头部
- HTML - 网站图标
- HTML - JavaScript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - CSS布局
- HTML - 响应式网页设计
- HTML - 特殊符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - 画布
- HTML API 接口
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSockets
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 杂项
- HTML - 数学标记语言
- HTML - 微观数据
- HTML - 索引数据库
- HTML - Web 消息传递
- HTML - CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - Web 幻灯片台
- HTML 工具
- HTML - 二维码
- HTML - Modernizr
- HTML - 验证器
- HTML 备忘单
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 代码参考
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- HTML - ISO 语言代码
- HTML - 字符编码
- HTML - 已弃用的标签和属性
HTML - optimum 属性
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 |