Question

我有一个自定义元素，其创建方式如下：

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

  this.appendChild(on_off_switch);

 }

但在查看来源时，我注意到on_off_switch的课程未设为switch demo3。

所有其他作业都有效，例如on_off_switch.style['background-color'] = 'red'等。

是否可以设置附加在自定义元素中的元素的CSS class？

Answer 1

对于historical reasons，使用className属性而不是class：

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

Answer 2

class是元素属性的名称，而className是其对应的属性：

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

在JavaScript中设置动态创建元素的`class`属性

2 个答案: