Why class attribute cannot assign inline by javascript? [duplicate]

Question

<html>
  <head>
    <style>     
      .tagging {
        border: 1px solid black;
        width: 20px;
        height: 30px;
      }
    </style>
    <script>
      window.onload = function() {
        var div = document.getElementsByTagName("div");
        div[0].class = "tagging";
      }     
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

This is my code. I wonder why it doesn't work when I assign class attribute via javascript, but it works when I assign inline directly in html

<div class="tagging"></div>

Sine class is a reserved keyword in many languages, the creators of the DOM API decided to map the class attribute to the className property. In JavaScript it wouldn't actually matter because even though class is a reserved keyword, you can use such keywords as property names. — Felix Kling
– Felix Kling, Commented Sep 5, 2013 at 5:25

Sergio · Accepted Answer · 2013-09-05 05:24:30Z

11

You need to use className.

Try:

div[0].className = "tagging";

If you want to add tha class to the existing one you can use:

div[0].className += " tagging"; // adding white-space is important

Demo here

To read: MDN className.

edited Sep 5, 2013 at 5:24

answered Sep 5, 2013 at 5:18

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhir Bastakoti · Accepted Answer · 2013-09-05 05:17:55Z

4

use className, so change:

var div = document.getElementsByTagName("div");
div[0].class = "tagging";

to

var div = document.getElementsByTagName("div");
div[0].className = "tagging";

Demo:: jsFiddle

answered Sep 5, 2013 at 5:17

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Comments

johannchopin · Accepted Answer · 2020-04-04 19:34:57Z

0

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then:

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

edited Apr 4, 2020 at 19:34

johannchopin

15k11 gold badges64 silver badges125 bronze badges

answered Sep 5, 2013 at 5:19

Sasidharan

3,7503 gold badges21 silver badges37 bronze badges

Collectives™ on Stack Overflow

Why class attribute cannot assign inline by javascript? [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related