0

因此，我试图弄清楚如何通过使用 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>
4

3 回答 3

1

三件事：

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

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

var bg = 'lightblue';

function toggleColour()
{
    if( bg === "lightblue" ) 
    {
        bg = "orange";
    }
    else
    {
        bg = "lightblue";
    }

    document.getElementById('container').style.background = bg;
}

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

于 2013-08-11T17:23:30.403 回答
0

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

你可以做什么：

  • 用于getComputedStyle获取实际值。然而，最初rgb(173, 216, 230)并非lightblue如此，因此跨浏览器解决方案并不容易。
  • 只需交换条件：如果是橙色，则将其设置为蓝色，否则（如果是蓝色或什么都没有）将其设置为橙色。（演示）
  • 将style属性设置为 HTML 中的起始值（演示）
于 2013-08-11T17:16:27.170 回答
0

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

于 2013-08-11T17:21:30.397 回答