Set the `class` attribute of a dynamically-created element in JavaScript

Question

I have a custom element, which is created like:

connectedCallback()
{
  var on_off_switch = document.createElement('Div');
  on_off_switch.class = 'switch demo3';

  this.appendChild(on_off_switch);

 }

But I noticed when viewing the source that the on_off_switch's class is not set to switch demo3.

All other assignments work, like on_off_switch.style['background-color'] = 'red', etc.

Is it possible to set the CSS class of a element appended inside a custom element?

gyre · Accepted Answer · 2017-04-25 17:25:04Z

6

For historical reasons, the className property is used instead of class:

function connectedCallback () {
  var on_off_switch = document.createElement('div')
  on_off_switch.className = 'switch demo3'

  this.appendChild(on_off_switch)
}

edited Apr 25, 2017 at 17:25

answered Apr 25, 2017 at 17:06

gyre

16.8k4 gold badges40 silver badges47 bronze badges

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

Comments

Supersharp · Accepted Answer · 2017-04-25 20:46:59Z

0

class is the name of the element attribute, while className is its corresponding property:

on_off_switch.className = 'switch demo3'
// or    
on_off_switch.setAttribute('class', 'switch demo3')

answered Apr 25, 2017 at 20:46

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Collectives™ on Stack Overflow

Set the `class` attribute of a dynamically-created element in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related