var element = document.getElementById('myElement'); // 添加类名 'newClass' element.className += ' newClass'; // 注意前面的空格 ``` 但是，这种方法在不知道元素当前是否有类名的情况下可能会引入额外的空格，因此更稳妥的做法是先检查`className`属性。 ```javascript if (!element.className.includes('newClass')) { element.className += ' newClass'; } ``` #### 移除类名 移除类名稍微复杂一些，因为你需要找到并替换掉或移除特定的类名字符串。 ```javascript // 移除类名 'oldClass' element.className = element.className.replace(/\boldClass\b/g, ''); ``` 这里使用了正则表达式来确保只匹配完整的类名`oldClass`，而不会影响其他包含`oldClass`作为子字符串的类名。 #### 替换类名 替换类名通常意味着先移除旧的类名，然后添加新的类名。但你也可以通过直接设置`className`属性来实现，不过这需要你完全知道你想要保留哪些类名。 ```javascript // 假设我们要将 'oldClass' 替换为 'newClass' element.className = element.className.replace(/\boldClass\b/g, 'newClass'); // 如果不确定'oldClass'是否存在，可以这样做以避免重复添加'newClass' if (!element.className.includes('newClass')) { element.className = element.className.replace(/\boldClass\b/g, '') + ' newClass'; } ``` ### 2. 使用`classList`属性 `classList`属性提供了一个更加灵活和强大的接口来操作元素的类名列表。它是HTML5中引入的，现在已被广泛支持。 #### 添加类名 使用`add`方法可以安全地向元素添加一个类名，不用担心重复添加或额外的空格问题。 ```javascript element.classList.add('newClass'); ``` #### 移除类名 使用`remove`方法可以移除一个类名。 ```javascript element.classList.remove('oldClass'); ``` #### 切换类名 `toggle`方法用于在元素上切换类名。如果类名存在，则移除它；如果不存在，则添加它。 ```javascript element.classList.toggle('toggleClass'); ``` #### 检查类名是否存在 `contains`方法用于检查元素是否包含指定的类名。 ```javascript if (element.classList.contains('someClass')) { // 执行操作 } ``` #### 替换类名 虽然`classList`没有直接替换类名的方法，但你可以结合`remove`和`add`方法来实现这一功能。 ```javascript element.classList.remove('oldClass'); element.classList.add('newClass'); ``` ### 实际应用场景 假设你在“码小课”网站上开发一个课程导航栏，当用户点击某个课程标签时，你希望高亮显示该标签以表明它是当前选中的课程。这就可以通过动态修改元素的类名来实现。 ```html ``` 在这个例子中，`selectCourse`函数接受一个课程ID作为参数，并首先移除所有课程项的高亮（即移除`active`类名），然后为选中的课程项添加`active`类名以实现高亮显示。这种方式使得动态修改类名来更新网页样式变得既简单又直观。 ### 结论 通过`className`属性和`classList`属性，JavaScript提供了灵活而强大的工具来动态修改元素的类名。`classList`由于其链式调用、自动处理空格和重复类名等优势，成为了更受欢迎的选择。在开发Web应用时，掌握这些技术可以极大地提升页面的交互性和用户体验。希望这篇文章能帮助你在“码小课”或任何其他Web开发项目中更有效地使用JavaScript来操作元素的类名。