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

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

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

第二次更新

---

实际上，站点用户有能力更改此类，因此我正在尝试实现这一点：用户通过单击class1并使其成为“class1 class2”来更改类，以获取该类的所有元素：

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

然后在它们上面循环：

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

因此，完整代码如下所示：

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

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

.class2{
颜色：红色
}

1
2

您的代码有两个问题：

您试图将

class1

查找为

id

，但没有任何元素具有

id=“class1”

；我假设您希望使用该类查找元素，但这不是

getElementByid

所做的

通过分配给

className

，您正在覆盖类列表；相反，您需要附加到它（包括一个空格，这样您就得到了正确的字符串）

如果要将第二个类添加到所有具有

class1

的元素中，则需要一个循环：

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

querySelectorAll

适用于所有现代浏览器，也适用于IE8。它接受CSS选择器并返回匹配元素的列表。然后，在上面的例子中，我通过借用

Array#forEach

来循环列表，它很乐意循环遍历类似于

querySelectorAll

中的列表之类的数组

我应该提到的是，如果您想在IE8上使用

forEach

，您需要一个polyfill。当然，也可以使用一个无聊的旧循环：

var list = document.querySelectorAll(".class1");
var n;
for (n = 0; n < list.length; ++n) {
    list[n].className += " class2";
}

或仅限于

.foo1

的直接子级：

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

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

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

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

建议如下：

---

如果您正在使用jQuery，但忘记标记它（嘿，这种情况经常发生）：

全部：

仅在

.foo1

中：

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

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

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

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

或仅限于

.foo1

的直接子级：

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

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

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

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

---

您没有满足此选择器的任何元素：

document.getElementById（'class1'）

。请描述您迄今为止尝试的内容。这在jQuery中变得很简单，在普通的ol'javascript中也是可行的。@ne1410s在普通的JS中也很简单。另外，不需要一个沉重的（而且大部分是无用的：X）库。冷静点。他们看到了身份证的事情，决定投否决票（在我看来很严厉），但没有回来。发生在我们所有人身上。：-）我知道，伙计。我爱得如此之深，以至于有时我会把这些愚蠢的事情当成自己的事。很快就要结束了。：）你的回答同样有效。谢谢但是我的问题有一个更新，请阅读，如果可以的话，告诉我解决方案是什么？我使用了你的.class2示例，效果很好。以及其他用户的答案。不客气，它必须起作用。：）现在，关于您的更新-更大的问题是在刷新后保留这些类，而不是将类更改绑定到单击事件。请看我的更新。实际上，您的代码可以工作，但由于这是一个单击事件，它会临时添加第二个类，但当页面重新加载时，它就消失了。我需要通过点击事件来实现它。我该怎么做？@t-j-crowder我的类1是可点击的，当我点击它时，它会将seocnd类2添加到其中。所以这段javascript代码完成了点击的工作，它向其中添加了另一个类。@。你原来的问题得到了回答，我建议你写一个新的问题，重点放在你仍然需要的那一点上，因为a）在一个问题被回答后，实质性地增加一个问题并不是很酷，B）听起来你真的在问两个问题，所以它们应该分开。