如何使用按钮在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() {&nbsp; var x = document.querySelector('.test-3');&nbsp; 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 () {&nbsp; &nbsp; var x = document.getElementsByClassName("test-3")[0];&nbsp;&nbsp; &nbsp;x.className += ' test-2';&nbsp; &nbsp;console.log(x.getAttribute("class"))}p{&nbsp; color: red;}.test-2{&nbsp; font-size: 2em;&nbsp; color: blue;}.test-3{&nbsp; font-size: 5em;&nbsp; font-weight: bold;}<p>&nbsp; &nbsp; test 1&nbsp; </p>&nbsp; <h2 class="test-2">&nbsp; &nbsp; test 2&nbsp; </h2>&nbsp; <h3 class="test-3">&nbsp; &nbsp; test 2&nbsp; </h3>&nbsp; <button onclick="addClass()">&nbsp; &nbsp; click me&nbsp; </button>