JS向类添加类

Question

我正在尝试运行这个非常基本的代码，在那里我向所选元素添加一个类。

https://jsfiddle.net/wm27ch2p/1/

document.getElementsByClassName("liHome")[0].classname += ' active';
document.getElementsByClassName("aHome")[0].classname += ' active';

<li class="liHome"><a class="aHome" href="#yellowBar">Home</a></li>

编辑：感谢您指出错字，除了这个问题，还有什么办法可以将这个类名添加到liHome或aHome类的所有元素中，而不仅仅是[0]。

Answer 1

className是骆驼式的：

＆＃13;

＆＃13;

document.getElementsByClassName("liHome")[0].className += ' active';
document.getElementsByClassName("aHome")[0].className += ' active';

＆＃13;

<li class="liHome"><a class="aHome" href="#yellowBar">Home</a></li>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用classList。

＆＃13;

＆＃13;

document.getElementsByClassName("liHome")[0].classList.add('active');
document.getElementsByClassName("aHome")[0].classList.add('active');

＆＃13;

<li class="liHome"><a class="aHome" href="#yellowBar">Home</a></li>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正确的属性为className，而不是classname：

document.getElementsByClassName("liHome")[0].className += ' active';
// etc

Answer 3

JS区分大小写，该属性称为className，而不是classname：

document.getElementsByClassName("liHome")[0].className += ' active';
document.getElementsByClassName("aHome")[0].className += ' active';

<li class="liHome"><a class="aHome" href="#yellowBar">Home</a></li>

Answer 4

使用classList添加新课程：

＆＃13;

＆＃13;

document.getElementsByClassName("liHome")[0].classList.add('active');
document.getElementsByClassName("aHome")[0].classList.add('active');

＆＃13;

.active {
  border: 1px solid red;
}

＆＃13;

<li class="liHome"><a class="aHome" href="#yellowBar">Home</a></li>

＆＃13;

＆＃13;

＆＃13;