javascript新手，可以't计算出document.getElementById与if语句中的值是否匹配

New to javascript, and can't figure out matching document.getElementById to value in an if statement

本文关键字：语句 if 是否 getElementById document 可以 新手 计算 javascript      更新时间：2023-09-26

因此，我正试图通过使用javascript切换按钮来更改容器div的颜色，但我认为在尝试让div在语句中工作时，我缺少了一些明显的东西。当我运行代码并按下切换按钮时，什么都不会发生。非常感谢。

<!DOCTYPE html>
    <head>
    <style>
    body {
    }
    #container {
        height: 300px;
        width: 500px;
        background: lightblue;
        position: absolute;
        float: center;
        text-align: center;
    }
    h1 {
        font-size: 50px;
        font-family: sans-serif;
    }
    #button {
        font-size: 30px;
    }
    </style>
    <script>
    function toggleColour()
    {
        if (document.getElementById('container').style.background == ("lightblue"))
            {
                document.getElementById('container').style.background = ("orange");
            }
        else
            {
                document.getElementById('container').style.background = ("lightblue");
            }
    }
    </script>
    <body>
    <div id="container">
    <h1>Lets button this up!</h1>
    <button type="button" id="button" onclick="toggleColour()">Toggle Colour</button>
    </div>
    </body>

三件事：

  1. background是一个简写的CSS属性，它将许多背景属性组合在一起（请参阅此处的列表）。如果只使用background设置背景色，则仍然需要从background-color读取结果（如果它是您正在设置的唯一背景属性，则也应该在CSS中使用它）
  2. CCD_ 4和CCD_。大多数浏览器（如果不是全部？）都会返回RGB值（例如rgb(173, 216, 230)代表lightblue），即使颜色是使用颜色名称设置的
  3. JavaScript中的.style不返回CSS应用的样式，只返回那些直接使用元素的style属性应用的样式。您需要使用window.getComputedStyle()

在这种情况下，假设背景颜色的开始状态并使用标志来跟踪它会简单得多

var bg = 'lightblue';
function toggleColour()
{
    if( bg === "lightblue" ) 
    {
        bg = "orange";
    }
    else
    {
        bg = "lightblue";
    }
    document.getElementById('container').style.background = bg;
}

请注意，字符串文字周围不需要括号，使用严格的===进行比较是一种很好的形式。

@Bergi是对的。要获得元素的结果样式（来自CSS或内联样式），您可以在实际浏览器（Chrome、Firefox、Safari、Opera和IE9）中使用getComputedStyle，在版本9之前的IE中使用currentStyle。

您的问题是.style属性只反映元素的style属性（它是空的），而不是通过CSS应用于它的所有样式。因此，在第一次单击时，.style.background为空，并且将被设置为显式"lightblue"（您看不到）。第二次单击时，它现在已设置并满足if条件，因此它将更改为"orange"。

你能做什么：

  • 使用getComputedStyle获取实际值。然而，最初应该是rgb(173, 216, 230)而不是lightblue，因此跨浏览器解决方案并不容易
  • 只需交换条件：如果它是橙色，则将其设置为蓝色，否则（如果它是蓝色或什么都没有）将它设置为橙色。（演示）
  • 在HTML中将style属性设置为起始值（演示）
相关文章：