gpt4 book ai didi

javascript - if else条件用js改变div颜色

转载 作者:行者123 更新时间:2023-11-30 12:37:12 25 4
gpt4 key购买 nike

我希望有人能帮助解决这个问题。我正在尝试使用 if else 语句更改“div id”的背景颜色。因此,如果“udata”大于 70,则包含结果的框的背景将变为绿色,或者根据其他条件变为其他颜色。一旦我能让它工作,“udata”值将由数据库中的 php 拉取提供。

我搜索了现有的链接,但我没有找到这种颜色变化、div 背景和 if else 语句的组合。

如有任何帮助,我们将不胜感激。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="BoxTEST.css">
<script type="text/javascript">
function () {

var udata = [53];

if (udata >= 70) {
document.getElementById("centerbox1").style.backgroundColor = '#99C262';
}
else
if (udata >= 51 && udata.value <70)
{
document.getElementById("centerbox1").style.backgroundColor = '#F8D347';
}
else
if (udata <=50)
{
document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
}
}
</script>
</head>
<body>
<div class="containerbox">
<div id="centerbox1" style= min-width:25%; max-height: 90px">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">53%</span>
<br>
<span style="color: #fff ; font-weight:bold">Utilisation</span></p>
</div>
</div>
</div>
</body>
</html>

最佳答案

删除了 udata.value 并将其设为 udata 并调用了您的函数。在主体结束之前使用脚本。

找到工作代码here

<div class="containerbox">
<div id="centerbox1" style= min-width:25%; max-height: 90px">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">53%</span>
<br>
<span style="color: #fff ; font-weight:bold">Utilisation</span></p>
</div>
</div>
</div>
<script>
(function () {
var udata = [53];
if (udata >= 70) {
document.getElementById("centerbox1").style.backgroundColor = '#99C262';
}
else if (udata >= 51 && udata < 70)
{
document.getElementById("centerbox1").style.backgroundColor = '#F8D347';
}
else if (udata <=50)
{
document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
}
})();
</script>

关于javascript - if else条件用js改变div颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25713190/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com