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

javascript add class to an anchor when page loaded

本文关键字：添加 加载 JavaScript      更新时间：2023-09-26

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

<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(是一个单击事件，因此通过运行代码，它会暂时将第二个类(class2(添加到class1中，但是当页面重新加载时，它已经消失了。我需要通过单击 class1 通过单击事件来实现它。我该怎么做？

第二次更新实际上，站点用户能够更改此类，因此我正在尝试实现此目的：用户通过单击类1并将其设置为"类1类2"来更改类

代码有两个问题：

  1. 您正在尝试将class1查找为id，但您没有任何元素与id="class1";我假设你想用那个类查找元素，但这不是getElementByid所做的

  2. 你通过分配给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";
});

或仅.foo1的直系子女：

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

推荐阅读：

  • 多核
  • DOM
  • CSS 选择器

如果你正在使用jQuery并且忘记标记它(嘿，它发生了(：

都：

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

仅在.foo1内：

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

或仅.foo1的直系子女：

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

要获取该类的所有元素，请执行以下操作： 

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元素具有红色(： 

var elements = document.getElementsByClassName('class1');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.className += ' class2';
}
.class2 {
  color: red
}
<div class="class1">1</div>
<div class="class1">2</div>

或者，如果您的浏览器支持 classList(就像大多数现代浏览器一样(，那么类似这样的东西也可以工作： 

element.classList.add('class2');

问题更新后

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

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

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

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

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

http://jsfiddle.net/73efLsht/

相关文章：