使用 Javascript/jQuery 根据 Text Value 修改 CSS

Posted 2023-05-09

【中文标题】使用 Javascript/jQuery 根据 Text Value 修改 CSS

【英文标题】：Using Javascript/jQuery to modify CSS based on Text Value

【发布时间】：2012-06-24 18:54:53

【问题描述】：

OK ***ians，这是今天的谜题。

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

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

有什么可以做到这一点吗？还是我必须从头开始？

【问题讨论】：

我认为这个问题有点模棱两可，因为目前尚不清楚您是想根据温度改变某物的颜色（可能是文本），还是有从红色到蓝色的渐变比例，并且您想在刻度中的某处放置一个标记以对应温度？

【参考方案1】：

你可以像这样使用两个维度来表达颜色：

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)

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

【讨论】：

我喜欢这个版本，它更有活力。

添加 - 我遇到的唯一问题是，这个 Javascript 的 sn-p 在 Google API xml 数据加载到网站之前运行，所以我的 VALUE for TEMP 为 NULL。

【参考方案2】：

您可以使用 jQuery 做到这一点：

$(document).ready(function()
    $('#temp')​.change(function()
        if($(this).val() < 47)
            $(this).removeAttr("class").addClass("cold");
        else
            $(this).removeAttr("class").addClass("hot");
    )​;
);

CSS

​.hot background: #f00; color: #fff;
.cold background: #00f; color: #fff;

HTML

​<input type="text" id="temp"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ />​​​​​​​​​​​​​​​

希望这会有所帮助！仅供参考，fiddle。或者，您也可以使用.keyup() 函数！ :)

【参考方案3】：

这是一个 JSFiddle 改编自我为 JavaScript 热图图表生成颜色的类似实现。

您传入一个值、一个最小值和一个最大值来定义一个范围，然后根据脚本中定义的第一个、最后一个和中点颜色进行插值并生成一个十六进制值。这从红色变为绿色，范围为 0 - 50，但它也通过提供最极端的颜色来处理超出范围的值。也许您可以修改它以满足您的要求？