JavaScript 可以使用 HTML DOM Element 为 HTML Element 添加 CSS class，添加 CSS 可以使用 Element 的 classList 和 className 两个属性来配置。

Element.classList 和 Element.className 的区别：

  • Element.classList 使用其方法 add() 函在原来的 class 上附加 class，不会删除原有的类，但是一次只能添加一个类 class，添加多个类需要多次调用其 add() 函数。
  • Element.className 是直接赋值该属性来添加类 class，可以一次赋值多个类，使用空格隔开多类，但是该方法会删除原有的类。

使用classList实现JS添加CSS样式类

以下实例分别展示为一个元素使用 classList 添加 CSS class 和为多个元素使用 classList 添加 CSS class

单元素使用classList添加CSS样式类

  • 使用 document.getElementById() 获取元素，使用 classList 添加多个 class 需要多次调用 document.classList.add：
el = document.getElementById('#aTable');
el.classList.add('table-bordered');
el.classList.add('table-hover');

  注意如下方法添加 CSS class 的方式是不正确的，因为 add() 方法不支持一次添加多个类：

el = getElementById('#el_id');
el.classList.add('table-bordered table-hover');  // 这添加方法不正确，无法实现添加 CSS
  • 使用 document.querySelector() ：

  在使用该方法时，如果存在多个匹配到元素，该方法返回第一个匹配到的元素。

el = document.querySelector('.table');
el.classList.add('table-bordered');
el.classList.add('table-hover');

多元素使用classList添加CSS样式

使用 document.querySelector() 和 querySelectorAll(() ，然后使用 Array 的 forEach() 函数循环为每一个元素添加 CSS class

var markdown = document.querySelector('.markdown');
  markdown.querySelectorAll('.table').forEach((item) => {
    item.classList.add('table-bordered');
        item.classList.add('table-hover');
    item.firstElementChild.classList.add('table-light');
  });

JavaScript使用className添加CSS

以下实例分别展示为一个元素使用 className 添加 CSS class 和为多个元素使用 classList 添加 CSS class

单元素使用 className 添加 CSS

  • 使用 document.getElementById()：
el = document.getElementById('#aTable');
el.className = 'table-bordered';
el.className = 'table-bordered table-hover';  //或者一次赋值多个类 class
  • 使用 document.querySelector() ：

  在使用该方法时，如果存在多个匹配到元素，该方法返回第一个匹配到的元素。

el = document.querySelector('.table');
el.className = 'table-bordered';
el.className = 'table-bordered table-hover';  //或者一次赋值多个类 class

多元素使用 className 添加 CSS

使用 document.querySelector() 和 querySelectorAll(() ，然后使用 Array 的 forEach() 函数循环为每一个元素添加 CSS class

var markdown = document.querySelector('.markdown');
markdown.querySelectorAll('.table').forEach((item) => {
    item.className = 'table-bordered table-hover';
    item.firstElementChild.className = 'table-light';  // 为 table 的表头 thead 赋值类 class
  });