html - How to add Class in javascript using button - Stack Overflow

admin管理员组

文章数量:1390749

I want to trying adding class using javascript, I know there is a lot of topic about this in stackoverflow but some of them is too plicated for me to understand, let say I have this simple code

this is some topic that I already read:

addclass-to-getelementsbyclassname-array

add-css-class-using-document-getelementsbyclassname

add-class-using-getelementsbyclassname-javascript

this is my 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>

this is my css:

p{
  color: red;
}

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

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

and this is my js:

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

where did I do it wrong? I'm quite confused since I'm new in javascript

I want to trying adding class using javascript, I know there is a lot of topic about this in stackoverflow but some of them is too plicated for me to understand, let say I have this simple code

this is some topic that I already read:

addclass-to-getelementsbyclassname-array

add-css-class-using-document-getelementsbyclassname

add-class-using-getelementsbyclassname-javascript

this is my 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>

this is my css:

p{
  color: red;
}

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

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

and this is my js:

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

where did I do it wrong? I'm quite confused since I'm new in javascript

• javascript
• html
• css

Share Improve this question Follow asked Oct 1, 2019 at 8:51 Rakish FriskyRakish Frisky 67511 gold badge1212 silver badges2626 bronze badges 1

• 1 Put () after addClass. <button onClick="addClass()"> click me </button> – vipul patel Commented Oct 1, 2019 at 8:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

getElementsByClassName returns a live collection of elements. Grabbing the first index [0] is correct, but you don't need to do it a second time:

x.className += ' test-2'

You may find using querySelector and classList a little easier as their interfaces are newer and often more suitable for modern JS development.

querySelector allows you to use CSS selectors to select elements, and returns the first instance of an element found with that selector. (Its sister method querySelectorAll returns a (non-live) nodelist which you can iterate over).

classList allows you to simply add and remove classes from an element without the need to concatenate class strings to each other.

Here's a demo.

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>

Remove the extra [0] when adding classname and do not return that from the function

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>

本文标签： htmlHow to add Class in javascript using buttonStack Overflow