Javascript 如果有其他条件，则使用 js 更改 div 颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25713190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change div colour with js if else conditiond
提问by Rob Wright
I hope someone can help with this. I'm trying to change the background colour of a "div id" using an if else statement. So that if "udata" is greater than 70 the background of the box containing the result will turn green, or based on the other if conditions other colours. Once I can get this to work the "udata" value will be supplied by a php pull from a database.
我希望有人可以帮助解决这个问题。我正在尝试使用 if else 语句更改“div id”的背景颜色。因此，如果“udata”大于 70，则包含结果的框的背景将变为绿色，或者基于其他条件其他颜色。一旦我可以让它工作，“udata”值将由从数据库中提取的 php 提供。
I've search the existing links but I haven't found this combination of colour change, div background and if else statements.
我已经搜索了现有的链接，但我还没有找到这种颜色变化、div 背景和 if else 语句的组合。
Any help would be appreciated.
任何帮助，将不胜感激。
<!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>
回答by subas_poudel
removed udata.value and made it udata and invoked your function. use the script before the end of the body.
删除 udata.value 并将其设为 udata 并调用您的函数。在正文结束之前使用脚本。
find the working code 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>
回答by theftprevention
You're declaring a function literalby wrapping your JavaScript code in a function() { }block. This means it's not being executed.
您通过将 JavaScript 代码包装在一个块中来声明函数文字function() { }。这意味着它没有被执行。
Even if you remove that code from the function() { }block, it's not going to work for several reasons:
即使您从function() { }块中删除该代码，由于以下几个原因，它也不会起作用：
Since the
<script>element comes before the rest of the HTML, it's being parsed and executed before the<div id="centerbox1">element is loaded, meaningdocument.getElementById("centerbox1")won't work. The<script>tag needs to be placed afterthe HTML it's supposed to affect.When you declare
var udata = [53], you're not setting it to a number. Enclosing a value in brackets ([]) means you're creating an array. That array contains one element, which is the number 53. If you want to declareudataas just the number by itself, usevar udata = 53.In your first
else ifcondition, you suddenly useudata.value. The variableudatadoesn't have avalueproperty; you should just useudataby itself, i.e.:else if (udata >= 51 && udata < 70)
由于
<script>元素出现在 HTML 的其余部分之前，它在<div id="centerbox1">元素加载之前被解析和执行，这意味着document.getElementById("centerbox1")将不起作用。该<script>标签需要放置后它应该影响HTML。当您声明时
var udata = [53]，您并没有将其设置为数字。将值括在方括号 ([]) 中表示您正在创建一个数组。该数组包含一个元素，即数字 53。如果您只想声明udata为数字本身，请使用var udata = 53.在第一个
else if条件下，您突然使用udata.value. 变量udata没有value属性；您应该单独使用udata，即：else if (udata >= 51 && udata < 70)
Here's a fiddlewith the proposed corrections. I changed some of the inline CSS (i.e. removed color: #fffto make text visible).
回答by eyalfein
I copied your code and tried to run it. It failed only due to typos, missing quotes, etc. So I made it a bit tidier and viola, seems to work:
我复制了您的代码并尝试运行它。它失败只是因为拼写错误、缺少引号等。所以我把它弄得更整洁一点，中提琴似乎有效：
HTML:
HTML：
<body onload="zzz()">
<div class="containerbox">
<div id="centerbox1" style="min-width:25%; max-height:90px">
<div class="value">
<p>
<span style="color: #000000 ;font-weight:bold; font-size:36px">53%</span>
<br>
<span style="color:#000000; font-weight:bold">Utilisation</span>
</p>
</div>
</div>
JS:
JS：
zzz = function() {
var udata = 49;
var element = document.getElementById("centerbox1");
if (udata >= 70)
element.style.backgroundColor = '#99C262';
else if (udata >= 51 && udata.value <70)
element.style.backgroundColor = '#F8D347';
else if (udata <=50)
element.style.backgroundColor = '#FF6C60';
}
回答by bazeblackwood
You could try loading your script afterthe tag. It's being executed before the DOM loads, most likely.
您可以尝试在标签后加载脚本。它很可能在 DOM 加载之前执行。
Or, by referencing the function through a variable, instead of letting the script self-execute, your script will automatically be executed only after the DOM is available.
或者，通过变量引用函数，而不是让脚本自行执行，您的脚本只会在 DOM 可用后自动执行。
var colorBox = function () {
var udata = [100];
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';
}
}
colorBox(); // Call the script like this
