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
JavaScript 为 HTML 元素删除 CSS
JavaScript 可以使用 HTML DOM Element 为 HTML Element 删除 CSS class， Javascript删除CSS样式可以使用 Element 的 classList 和 className 两个属性实现。
JavaScript删除CSS样式使用 Element.classList 和 Element.className 的区别：...
JavaScript 为多元素添加监听事件修改元素或属性
本文介绍使用原生JavaScript （Vanilla JS）为多个元素添加事件监听器，添加或修改元素（element）或属性（class, id, rel, type等），为触发事件的元素添加和修改属性和元素。
Javascript为多元素添加事件监听器的步骤 ：
获取所有的元素
使用循环一次性添加事件监听器
要为多个元素添加事件监听器，如要获取多个元...
Javascript 为元素添加事件监听器
使用原生 Javascript（Vanilla JS）为元素添加事件监听器，需要使用 EventTarget.addEventListener() 函数。
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 EventTarget 可以是一个文档上的元素 El...
