javascript - 如何使用按钮在javascript中添加类

Question

我想尝试使用 javascript 添加类，我知道在 stackoverflow 中有很多关于这个的主题，但其中一些太复杂了我无法理解，假设我有这个简单的代码

这是我已经读过的一些主题:

addclass-to-getelementsbyclassname-array

add-css-class-using-document-getelementsbyclassname

add-class-using-getelementsbyclassname-javascript

这是我的html

<p>
    test 1
  </p>
  <h2 class="test-2">
    test 2
  </h2>
  <h3 class="test-3">
    test 2
  </h3>

  <button onClick="addClass">
    click me
  </button>

这是我的CSS:

p{
  color: red;
}

.test-2{
  font-size: 2em;
  color: blue;
}

.test-3{
  font-size: 5em;
  font-weight: bold;
}

这是我的js:

function addClass () {
    var x = document.getElementsByClassName("test-3")[0]; 
 return  x[0].className += ' test-2';
}

我哪里做错了？我很困惑，因为我是 javascript 的新手

Answer 1

getElementsByClassName返回元素的实时集合。抓取第一个索引 [0] 是正确的，但不需要第二次:

x.className += ' test-2'

您可能会发现使用 querySelector和 classList更容易一些，因为它们的界面更新并且通常更适合现代 JS 开发。

querySelector 允许您使用 CSS 选择器来选择元素，并返回使用该选择器找到的元素的第一个实例。 (它的姊妹方法 querySelectorAll 返回一个(非实时)节点列表，您可以对其进行迭代)。

classList 允许您简单地在元素中添加和删除类，而无需将类字符串相互连接起来。

这是一个演示。

const button = document.querySelector('button');
button.addEventListener('click', addClass, false);

function addClass() {
  var x = document.querySelector('.test-3');
  x.classList.add('test-2');
}

p { color: red; }
.test-2 { font-size: 2em; color: blue; }
.test-3 { font-size: 5em; font-weight: bold; }

<p>test 1</p>
<h2 class="test-2">test 2</h2>
<h3 class="test-3">test 2</h3>
<button>click me</button>