使用Javascript / jQuery基于Text Value修改CSS

2023年10月17日 278次阅读

好的Stackoverflowians,这是当天的谜语.

我在WordPress网站上有一个天气侧边栏小部件,它会从Google Weather API中获取所有数据.我想设置一个从RED到BLUE的渐变,然后通过javascript神的魔力来查看温度的值.

数字越大=越接近RED
较低的数字=更接近蓝色

那里有什么可以做到的吗？或者我必须从头开始？

最佳答案 您可以使用以下两个维度来表达颜色：

var max_temp = 50, // set maximum expected temperature
min_temp = -10, // set minimum temperature
temp_range = max_temp - min_temp, // calculate range
temp_rating = ((temp - min_temp) / temp_range) * 255 // express value in terms of the range multiplied by 255
red = temp_rating, // more temp = more red
blue = 255 - temp_rating; // more temp = less blue

那么你的CSS颜色会变成：

rgb(red, 0, blue)

不知道它是否会看起来不错;-)

点赞