Question

我正在尝试为我的元素添加第二个类
的之前

<div class="foo1">
    <a class="class1" >Text</a>
</div>

的后

<div class="foo1">
    <a class="class1 class2" >Text</a>
</div>

这是我的javascript代码（尝试但没有成功）：

window.onload = function() {
  document.getElementById('class1').className = 'class2';
};

的更新实际上，你的所有答案都有效，但由于这个（class1）是一个click事件，通过运行代码它会临时将第二个类（class2）添加到class1，但是当重新加载页面时，它已经消失了。我需要通过单击class1通过单击事件来实现它。我该怎么做？

第二次更新 实际上网站用户有能力改变这个类，所以我试图让这种情况发生：用户通过点击class1并使其成为＆＃34; class1 class2＆＃34;

来更改类

Answer 1

您的代码有两个问题：

您尝试将class1视为id，但您没有id="class1"的任何元素;我假设您想要使用类查找元素，但这不是getElementByid所做的
您通过分配到className 覆盖班级列表;相反，你需要追加（包括空格，所以你最终得到正确的字符串）。

如果您要将第二个类添加到具有class1的所有元素，则需要循环：

[].forEach.call(document.querySelectorAll(".class1"), function(element) {
    element.className += " class2";
});

querySelectorAll适用于所有现代浏览器，也适用于IE8。它接受CSS选择器并返回匹配元素的列表。然后，在上面的内容中，我通过借用Array#forEach来遍历列表，querySelectorAll很乐意循环遍历类似于forEach的列表之类的数组。

我应该提一下，如果你想在IE8上使用var list = document.querySelectorAll(".class1"); var n; for (n = 0; n < list.length; ++n) { list[n].className += " class2"; }，你需要一个polyfill。或者当然，使用一个无聊的旧循环：

.foo1

或者如果你只想在[].forEach.call(document.querySelectorAll(".foo1 .class1"), function(element) { element.className += " class2"; });：

.foo1

或仅{em>直接孩子 [].forEach.call(document.querySelectorAll(".foo1 > .class1"), function(element) { element.className += " class2"; });：

$(".class1").addClass("class2");

建议阅读：

如果您正在使用jQuery并忘记标记它（嘿，它会发生）：

所有

.foo1

仅限于$(".foo1 .class1").addClass("class2");：

.foo1

或仅{em>直接孩子 $(".foo1 > .class1").addClass("class2");：

{{1}}

Answer 2

获取该类的所有元素：

var elements = document.getElementsByClassName('class1');

然后循环它们：

for (var i = 0; i < elements.length; i++)

您需要连接值：

element.className += ' class2';

所以完整代码如下所示：

var elements = document.getElementsByClassName('class1');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.className += ' class2';
}

示例（.class2元素为红色）：

＆＃13;

var elements = document.getElementsByClassName('class1');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.className += ' class2';
}

＆＃13;

.class2 {
  color: red
}

＆＃13;

<div class="class1">1</div>
<div class="class1">2</div>

＆＃13;

或者，如果您的浏览器支持classList（正如大多数现代浏览器所做的那样），那么这样的内容也会起作用：

element.classList.add('class2');

问题更新后

但由于这是一个click事件，它会暂时添加第二个类，但是当重新加载页面时，它已经消失了。我需要通过点击事件来实现它。我该怎么做？

理想情况下，您在页面重新加载后使用服务器端语言来维护更改的类。通常，当您重新加载页面时，您的整个DOM会重新加载（包括类）。

有一个客户端解决方案，但不建议使用：使用存储机制（如sessionStorage，localStorage或普通旧cookie）来跟踪点击事件。然后，当您渲染页面时，只需检查存储以查找您跟踪的点击事件，然后使用上面的代码相应地调整类。

为什么不推荐？因为这是一种使用客户端语言伪造服务器端行为的方法。理想情况下，如果您希望将内容保留在客户端上，则可以避免完全重新加载页面并使所有内容都发生在单个页面上（如SPA一样）。但我担心除非你提供更多关于你想做什么的细节，否则我不能告诉你更多。

这是一个使用localStorage的超简单示例，请注意它在刷新后如何保留类设置：

http://jsfiddle.net/73efLsht/

javascript在加载页面时将类添加到锚点

2 个答案: