javascript - 使用 document.getElementsByClassName 添加 css 类

Question

我正在尝试使用 javascript 添加 css 类，但它不起作用

var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) {
  x[i].className += 'newclassname';
}

但是当我尝试改变背景时它起作用了

var x = document.getElementsByClassName("oldclassname");
var i;
for (i = 0; i < x.length; i++) {

  x[i].style.backgroundColor = "red";
}

添加css文件时我做错了什么

Answer 1

className 是 以空格分隔 的类名列表。您的代码的问题是它没有用空格分隔类名。试试这个:

var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' newclassname'; // WITH space added
}

没有空格，它只有一个类名

<div class="oldclassnamenewclassname"></div>
//if use space
<div class="oldclassname newclassname"></div>//get two class name