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

Question

我想尝试使用 javascript 添加类，我知道在 stackoverflow 中有很多关于这个的主题，但其中一些对我来说太复杂了，我无法理解，假设我有这个简单的代码这是我已经读过的一些主题：addclass-to-getelementsbyclassname-arrayadd-css-class-using-document-getelementsbyclassnameadd-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>

Answer 2

添加类名时删除额外的 [0] 并且不要从函数中返回它

function addClass () {

    var x = document.getElementsByClassName("test-3")[0]; 

   x.className += ' test-2';

   console.log(x.getAttribute("class"))

}

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 onclick="addClass()">

    click me

  </button>