Question

我正在尝试更改文字的颜色。为此，我使用JavaScrip更改了id标记上的div，因此应用了不同的CSS规则。

home.html的

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style-original.css" />
        <meta charset="utf-8" />
        <title>test</title>
        <script type="text/javascript">
        <!--
            function change()
            {
                document.getElementById("part1").className = "part2"
            }
        //-->
        </script>
    </head>
    <body>
        Hello.<br />
        <div id="part1">Test test.</div><br />
        <input type='button' onclick='change()' value='Form Checker' />
    </body>
</html>

样式original.css

#part1
{
    color: #FF0000;
}

#part2
{
    color: #7D26CD;
}

单击按钮时颜色不会改变。问题是什么？问题是正在改变className，因为我应该更改id。这是一个很大的“doh”时刻。

Answer 1

要使其发挥作用的最小工作量是将change()功能更改为：

document.getElementById("part1").id = "part2"

您需要跟踪当前的ID，否则change()函数将无法再找到该元素。

Answer 2

你有问题。在你的javascript函数change（）

而不是这一行

document.getElementById("part1").className = "part2"

它应该是这样的

document.getElementById("part1").id = "part2"

那是因为你改变了类名而不是元素的id。看看这里的固定代码： http://jsfiddle.net/bA6SD/

Answer 3

您正在更改一个特殊性低于ID的类。保留该ID会超出添加课程的范围，但在您的示例中，您已经指定了另一个ID而不是类。

Answer 4

首先，你想要的行为有点不清楚。那就是说，这是我的解释......

在我看来，上述都不是很好的选择，因为它没有解决ids /类的意图。 Id表示特定dom元素的唯一标识符。因此不建议更改它。我建议改变你的风格来引用类而不是id。然后，您可以使用id（part1和part2）获取每个元素，并将类名称（即redText，purpleText）分配给具有与类关联的所需样式的元素。

document.getElementById("part1").className = "redText";

令人困惑的部分是你的命名没有表明你想要完成什么（part1意味着什么，以及为什么这样命名）。以这样的方式命名事物总是一个好主意，以便其他人可以按照你想要做的事情来做。

Answer 5

你真的需要改变身份证吗？我建议您更改类（这是您目前在示例中所做的）。这样您就不需要跟踪当前ID并且仍然可以更改样式。

找一个有效的例子here。

为什么id不变？

5 个答案: