html5 のメータータグは何を意味しますか? html5メーターの色を変更する方法を詳しく解説

寻∝梦
リリース: 2018-08-17 13:41:36
オリジナル
3917 人が閲覧しました

html5 メータータグの意味は何ですか? html5 メーターの色が変わる仕組みの詳しい説明 この記事では、html5 メーター タグの定義と使い方を中心に、html5 メーターの色が変わる仕組みについて詳しく説明します

html5 メーター タグの定義と使い方:

< ;meter> タグは度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。

例: ディスク使用量、クエリ結果の相関関係など。

注: は進行状況バー、 タグとして使用できません。

例は次のとおりです:

<meter min="0" max="20">5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>
ログイン後にコピー

メーター要素とは:

メーター要素は、指定された範囲内の数量値を表します。メーター要素には6つの属性があります。

1.value 属性: 要素内で具体的に表現される実際の値。この属性の値のデフォルトは 0 で、この属性には浮動小数点 10 進数値を指定できます。

2.min 属性: 指定範囲を指定するときに許可される実際の最小値。デフォルト値は 0 です。この属性を設定するときに設定する値は 0 未満にすることはできません。

3.max 属性: 指定範囲を指定するときに許可される最大値。設定時にこの属性の値が min の値より小さい場合、min 属性の値が最大値とみなされます。 max 属性のデフォルト値は 1 です。

4.low 属性: 指定範囲の下限値は high の値以下である必要があります。

5.high属性:範囲の上限を指定します。属性の値が low 属性の値より小さい場合、同様に、属性の値が max 属性の値より大きい場合、low 属性の値は high 属性の値とみなされます。の場合、max 属性の値は high の値とみなされます。

6.optimum 属性: 最適な属性値は、min 属性値と max 属性値の間にある必要があり、high 属性値より大きくてもかまいません。

HTML5メーターの色を変更する方法:

メーターの色を変更するには、min (最小値)、max (最大値)、low、high、value、optimalの5つの値を使用する必要があります。 、最初の 4 つの値は、進行状況全体を 3 つの間隔に分割します。

緑色: 値と最適化値が同じ間隔にある場合、緑色で表示されます。

黄色: 最適値が高値と最大値の間にあり、値が低値と高値の間にある場合、黄色で表示されます

最適値が低値と高値の間にあり、値が最小値と低値時間の間にある場合、黄色で表示されます最高と最高の間のとき。 U 最適値が最小と低の間にある場合、値の値は低と高の間で黄色で表示されます。

赤: 最適化が高と最大の間で、値が最小と低の間の場合、赤で表示されます。

最適値が最小値と低値の間にある場合、値は高値と最大値の間に赤で表示されます。 U Optimumが緑色の領域にある場合、Valueも緑色の領域にあり、Optimumが緑色の領域にあり、Value値が黄色の領域にある場合、全体が黄色で表示されます

Optimum が緑の領域にあるとき、Value 値は赤い領域にあり、赤全体

は、Optimum が緑の領域にあるとき、中央の緑の領域の Value 値は、Optimum がその領域にあるときであることを示します。緑の領域、値の値は最小と低、高と最大の間に黄色

が表示されます。最適値が緑の領域にある場合、値も緑の領域にあり、緑の

全体が表示されます。緑色の領域が緑色の領域にあり、値が黄色の領域にある場合、全体が黄色に表示されます

最適値が緑色の領域にあり、値が赤色の領域にある場合、全体が赤色に表示されます

HTML 4.01 と HTML 5 の違い:

タグは HTML 5 の新しいタグです。 【関連おすすめ】

HTMLの
タグの具体的な使い方とは? fieldsetを使用して境界線の色を設定するにはどうすればよいですか?

HTML

以上がhtml5 のメータータグは何を意味しますか? html5メーターの色を変更する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート