Question

在HTML文件中，我加载了包含一些代码的javascript文件（在标题中）。在该代码中，它检查cookie是否存在。如果cookie不存在，它应该向div添加一个类，该div应该与类匹配。

示例：

应该添加类的类：

<header class="firstClass">

javascript：

var classcode = document.getElementsByClassName("firstClass");

if (myCookie == null) {
    add class "secondClass" to "firstClass";
}

我尝试过几件事，但我无法让它发挥作用......

我应该提一下，javascript文件是在应该添加类的div之前加载的。

Answer 1

您可以使用querySelectorAll，以便找到类 firstClass 的所有元素。这将导致一个数组，然后你只需循环它。

var classcode = document.querySelectorAll(".firstClass");

classcode.forEach(function(element) {
    element.classList.add("mystyle")
  console.log(element);
});

Answer 2

您需要对具有类classList.add()的每个元素使用firstClass。尽管您可能只有单个元素，但最好使用循环来选择每个元素，这样以后当您使用相同的类在HTML中添加元素时，您就不需要更改JS代码。

＆＃13;

var classcode = document.getElementsByClassName("firstClass");

for(var i=0; i<classcode.length; i++){
   classcode[i].classList.add('secondClass');
}

＆＃13;

.secondClass{
  color: green;
}

＆＃13;

<div class="firstClass">1</div>
<div class="firstClass">2</div>
<div class="firstClass">3</div>

＆＃13;

Answer 3

试试这个： -

var classcode = document.getElementsByClassName("firstClass");
if (myCookie == null) {
    classcode .classList.add("secondClass");
}

Answer 4

document.getElementsByClassName返回一个集合。在这种情况下，使用spread operator将其转换为数组并使用数组方法（forEach）。然后检查数组长度是否大于0，如果大于0，则使用classList.add

添加另一个类

＆＃13;

var classcode = [...document.getElementsByClassName("firstClass")];
if (classcode.length > 0) {
  classcode.forEach(function(item) {
    item.classList.add('anotherClass')
  })
}

＆＃13;

.anotherClass {
  color: green;
}

＆＃13;

<header class="firstClass">Header Here</header>
<div class="someOtherClass"> Some Text</div>
<div class="firstClass">Another Text</div>

＆＃13;

Answer 5

我认为所有解决方案都有效。问题是我必须在div之后加载javascript文件，它应该添加类。谢谢你的帮助！：）

Javascript - 将类添加到类（而不是ID）

5 个答案: