Why class attribute cannot assign inline by javascript?

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>

https://developer.mozilla.org/en-US/docs/Web/API/element.className — Phil, Sep 05 '13 at 05:17
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, Sep 05 '13 at 05:25

Sergio · Accepted Answer · 2013-09-05T05:24:30.763

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 05 '13 at 05:24

answered Sep 05 '13 at 05:18

Sergio

28,539
11
85
132

score 4 · Answer 2 · answered Sep 05 '13 at 05:17

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 05 '13 at 05:17

Sudhir Bastakoti

99,167
15
158
162

score 0 · Answer 3 · edited Apr 04 '20 at 19:34

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 04 '20 at 19:34

johannchopin

13,720
10
55
101

answered Sep 05 '13 at 05:19

Sasidharan

3,676
3
19
37

Why class attribute cannot assign inline by javascript?

3 Answers3