Home  >  Article  >  Web Front-end  >  About the solution to the color problem of html meter label

About the solution to the color problem of html meter label

黄舟
黄舟Original
2017-06-29 14:12:303710browse

About the meter label color issue

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

This is my code. You can see that the maximum value is 100, below 30 is low, and above 60 is high. Then the question comes:

About the solution to the color problem of html meter label

About the solution to the color problem of html meter label

About the solution to the color problem of html meter label

#Add an

onchange event to monitor Let's make a judgment about the value. Setting the style attribute

Mainly because I don’t know how to change the color. I don’t know how to write it in style. Using

background-color is useless. What you use directly with color is to change the color of the text in the label. For example, if I want to make it turn red when the value is low, how can I solve it?

After checking, there are no relevant attributes.

Use
canvas Simulate

Thank you, I took a look and changed the value in the optimal value "optimum". When it is a low value, it turns red. (Although I don’t know what’s going on, and there is no way to directly change the style, and I couldn’t find it online.)

optimum is the maximum value, and the closer it is, the better. Oh I think, I get it, the color changes from green to yellow to red the further away from the maximum bonus.

The above is the detailed content of About the solution to the color problem of html meter label. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn