Javascript 检测、添加、移除样式(className)函数代码

代码如下: [removed] // 说明：添加、移除、检测 className function hasClass(element, className) { var reg = new RegExp(‘(\\s|^)’+className+'(\\s|$)’); return element.className.match(reg); } function addClass(element, className) { if (!this.hasClass(element, className)) { element.className += ” 在JavaScript中，操作DOM元素的CSS类（class）是常见的任务，这有助于动态改变网页的样式和交互。这里，我们有三个实用的函数：`hasClass`、`addClass`和`removeClass`，它们分别用于检测一个元素是否具有特定的样式类、向元素添加样式类以及从元素中移除样式类。 `hasClass`函数通过正则表达式检查元素的`className`属性是否包含指定的样式类。这个函数接受两个参数：`element`，即需要检查的DOM元素；`className`，要检测的样式类名称。它创建了一个正则表达式，该表达式会在字符串`element.className`中查找类名的开始或结束处的空格或开头（这确保了类名前后没有多余空格）。如果匹配成功，说明元素包含该样式类，返回`true`；否则，返回`false`。 ```javascript function hasClass(element, className) { var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); return element.className.match(reg); } ``` 接下来，`addClass`函数用于向元素添加样式类。此函数同样接收`element`和`className`作为参数。在添加样式类之前，它先调用`hasClass`来检查元素是否已经具有该样式类。如果元素不包含这个类，`!this.hasClass(element, className)`将为`true`，然后将`className`添加到`element.className`后面，用空格分隔，以保持其他类名不变。 ```javascript function addClass(element, className) { if (!hasClass(element, className)) { element.className += " " + className; } } ``` `removeClass`函数用于移除元素的某个样式类。同样，它接受`element`和`className`作为参数。如果`hasClass`返回`true`，表示元素包含这个样式类，那么它会创建一个新的正则表达式，用来匹配并替换掉`element.className`中的类名。使用`replace`方法，将找到的匹配项替换为空字符串，从而移除样式类。 ```javascript function removeClass(element, className) { if (hasClass(element, className)) { var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); element.className = element.className.replace(reg, ' '); } } ``` 这三个函数是JavaScript中操作CSS类的常见工具，可以在各种动态效果和交互场景中派上用场。例如，在响应式设计中，根据屏幕尺寸切换样式；在用户交互事件（如点击、鼠标悬浮等）中改变元素外观；或者在处理表单验证时高亮显示错误字段等。这些函数使得我们可以灵活地控制页面元素的样式，提高用户体验。