Question

我希望有人可以帮忙解决这个问题。我正在尝试使用if else语句更改“div id”的背景颜色。因此，如果“udata”大于70，则包含结果的框的背景将变为绿色，或者如果条件为其他颜色则基于另一个。一旦我能够使用它，“udata”值将通过数据库中的php pull提供。

我搜索现有的链接，但我没有找到颜色更改，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>

Answer 1

删除了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>

Answer 2

您通过将JavaScript代码包装在function() { }块中来声明函数文字。这意味着它没有被执行。

即使您从function() { }块中删除了该代码，但由于以下几个原因，它不会起作用：

由于<script>元素位于HTML的其余部分之前，因此在加载<div id="centerbox1">元素之前会对其进行解析和执行，这意味着document.getElementById("centerbox1")将无效。 {/ 1}}标记需要在之后放置它应该影响的HTML。

当您声明<script>时，您没有将其设置为数字。用括号（var udata = [53]）括起一个值意味着你要创建一个数组。该数组包含一个元素，即数字53.如果您想将[]仅仅声明为数字，请使用udata。

在您的第一个var udata = 53条件中，您突然使用else if。变量udata.value没有udata属性;你应该单独使用value，即：

udata

Here's a fiddle提出修正建议。我更改了一些内联CSS（即删除了else if (udata >= 51 && udata < 70)以使文本可见）。

Answer 3

我复制了你的代码并尝试运行它。它失败只是由于拼写错误，缺少引号等。所以我做了一点整洁和中提琴，似乎工作：

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：

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';
}

Answer 4

您可以尝试在标记后加载脚本。它很可能在DOM加载之前执行。

或者，通过变量引用函数，而不是让脚本自行执行，只有在DOM可用后才会自动执行脚本。

http://jsfiddle.net/5pfhgk5c/

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

如果不是条件，用js改变div颜色

4 个答案: