HTMLメーターラベルの色問題の解決方法について

メーターラベルの色の問題について

<meter id="meterid" value="1" min="1" max="100" low="30" high="60" optimum="50" style="width:300px;height:150px;color:red;">您的浏览器版本不能显示此控件</meter>

これは私のコードです。最大値が100で、30未満が低く、60以上が高いことがわかります。次に、問題は次のとおりです:

onchange イベントを追加して、値を監視および判断します。 style属性の設定

主に色の変更方法が分からないためです。スタイリッシュに書く方法がわかりません。 background-color を使用して色を直接使用するのは、ラベル内のテキストの色を変更することです。
例えば、値が低いときに赤くなるようにしたい場合、どうすれば解決できますか?

調べた結果、関連する属性はありません。
canvasを使ってシミュレーションしてみました

調べてみたところ、最適値「optimum」で値が低いと赤くなります。 (何が起こっているのかわかりませんし、スタイルを直接変更する方法はありませんし、オンラインで見つけることもできませんでしたが)

optimum が最高の値で、それに近いほど優れています。ああ、なるほど、最大値から遠ざかるにつれて色が緑→黄→赤と変化していきます。

以上がHTMLメーターラベルの色問題の解決方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。