HTML - high 屬性

HTML high 屬性用於指定儀表元素 (meter element) 的高值。當值超過高值限制時，顯示方式會有所不同。

此屬性值必須小於最大值（max 屬性）並且大於最小值和低值（min 屬性，low 屬性）。如果未在儀表元素中指定此屬性或其值大於最大值（max 屬性），則 high 屬性值將等於最大值。

語法

<meter high= "number"></meter>

應用於

以下列出的元素允許使用 HTML high 屬性

元素	描述
<meter>	HTML <meter> 標籤用於在給定範圍內呈現資料。

HTML high 屬性示例

以下示例將說明 HTML high 屬性的用法，以及我們應該在哪裡以及如何使用此屬性！

在儀表中定義高值

在下面的示例中，我們將建立一個儀表元素，並將高值設定為 80。

<!DOCTYPE html>
<html lang="en">
<body>
    <h3>HTML high Attribute</h3>
    <label for="server-load">Room 1: Server Load</label> 
    <meter id="server-load" value="96" min="0" max="100" 
           low="50" high="90" optimum="0.5">
    </meter>
</body>

</html>

儀表標籤的顏色取決於值和 high 值

在下面的示例中，我們將 high 屬性與 meter 標籤一起使用。在輸出中，如果“value”屬性的值介於 high 和 low 之間，則結果條將為綠色。

<!DOCTYPE html>
<html lang="en">
<body>
    <h3>HTML high 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" optimum="0.5">
    </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" optimum="0.5">
    </meter>
    <br>
    <label for="server-load">Room 3: Server Load</label> 
    <meter id="server-load" value="0.1" min="0" max="1" 
           low="0.3" high="0.8" optimum="0.5">
    </meter>
    
</body>

</html>

根據 high 值操作儀表元素的值。

考慮另一種情況，我們將與 high 屬性一起執行指令碼。在這裡，使用者可以動態增加值以達到目標。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'high' attribute</title>
</head>

<body>
    <!--HTML 'high' attribute-->
    <p>Example of the HTML 'high' attribute</p>
    <fieldset>
        <legend>Meter-high</legend> 
        <label for="">Rahul's Work Load</label> 
        <meter high="70" low="45" min="0" 
               max="100" value="70" id='rahul'>
        </meter>
        <br><br>
        <span id='res'>Average Workload</span>
        <br><br> 
        <button onclick="Increase()">Add Tasks</button>
        <p>Add more tasks</p>
    </fieldset>
    <script>
        function Increase() {
            var h = document.getElementById('rahul');
            var work = h.value;
            h.value = 90;
            var res = document.getElementById('res');
            res.innerHTML = "Your workload has increased from " 
            + work + " to " + h.value;
        }
    </script>
</body>

</html>

支援的瀏覽器

屬性
high	是 8.0	否	是 6.0	是 6.0	是 11.0

html_attributes_reference.htm

列印頁面