0

我正在尝试更改文本的颜色。为此，我使用 JavaScrip 更改标签id上的divt，以便应用不同的 CSS 规则。

主页.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 ”时刻。

4

5 回答 5

2

让它工作的最小工作量是将change()函数更改为：

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

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

于 2013-02-06T23:19:16.533 回答
1

你有问题。在你的 javascript 函数 change()

而不是这条线

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

它应该是这样的

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

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

于 2013-02-06T23:17:45.233 回答
1

您正在更改一个比 ID 具有更少特异性的类。保留该 ID 优先于添加类，但在您的示例中，您指定了另一个 ID 而不是类。

于 2013-02-06T23:21:59.540 回答
1

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

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

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

令人困惑的部分是您的命名并不表明您要完成什么（第 1 部分到底是什么意思以及为什么以这种方式命名）。以这样的方式命名事物总是一个好主意，这样其他人可以跟随你正在尝试做的事情。

于 2013-02-06T23:33:56.673 回答
0

你真的需要改变id吗？我建议您改为更改课程（这是您当前在示例中所做的）。这样您就不需要跟踪当前的 id 并且仍然可以更改样式。

在这里找到一个工作示例。

于 2013-02-06T23:36:39.857 回答