javaScript给元素添加多个class的简单实现

要给一个元素添加多个class，可以使用classList属性和它的add()方法。该方法可以接受多个参数，每个参数表示一个class，以逗号分隔。

下面是一个简单的示例，假设有一个按钮元素，希望给它添加多个class，分别表示不同的样式：

<button id="myButton">Click me!</button>

const myButton = document.getElementById('myButton');
myButton.classList.add('btn', 'btn-primary');

在上述示例中，我们首先获取了按钮元素的引用，然后使用classList.add()方法将两个class添加到该元素上。其中btn和btn-primary表示按钮的样式。

另一个示例是在用户单击按钮时动态地切换class。可以通过classList.toggle()方法实现。

例如，我们可以在按钮单击时将一个active类添加到按钮上，然后在下一次单击时再次移除该类：

<button id="myButton">Click me!</button>

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => {
  myButton.classList.toggle('active');
});

在上述示例中，我们首先获取了按钮元素的引用，然后使用addEventListener()方法注册了一个单击事件监听器。当用户单击按钮时，该监听器会执行一个回调函数，该函数使用classList.toggle()方法将active类添加到该元素中。如果该类已经存在，则该方法会将其移除。

通过上述两个示例，我们可以看到，在使用classList.add()和classList.toggle()方法时，可以方便地给元素添加和移除多个class，极大地增强了JavaScript操作HTML元素的能力。