修改Javascript元素类的几种约定【总结】

前言

在JS中改变元素类可以说是家常便饭，往往被认为是基础中的基础。该函数甚至可以用用户界面来编写。

今天给大家总结几种修改元素类的实用方法。

现代浏览器

现代浏览器classList进行了优化，它提供了一些方法并且不依赖于框架和插件：

document.getElementById("MyElement").classList.add('我的班级');

document.getElementById("MyElement").classList.remove('我的类');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('我的班级');

不幸的是，IE10以下的版本不支持此方法。 IE8和IE9可以通过第三方库支持该方法。通过 MDN 链接检查浏览器支持。

通用浏览器解决方案

选择元素的标准 JavaScript 方法是使用 document.getElementById("Id")。以下是一些常见做法。

替换所有元素类

如果您想用一门或多门课程替换现有课程，您可以写：

/**
 * 时间：2019年8月12日
 * 用户界面教程：https://www.codeqd.com/wp-content/uploads/2023/09/
 */
document.getElementById("MyElement").className = "我的类";//一个类
document.getElementById("MyElement").className = "MyClass1 MyClass2";//多个类

如果要添加多个类别，可以用空格分隔。

向元素添加额外的类

要向元素添加类而不删除/影响现有值，请添加空格并重命名该类，如下所示：

/**
 * 时间：2019年8月12日
 * 用户界面教程：https://www.codeqd.com/wp-content/uploads/2023/09/
 */

document.getElementById("MyElement").className += "我的班级";

从元素中删除类

如果要从元素中删除单个类而不影响其他可能的类，则需要使用正则表达式替换：

/**
 * 时间：2019年8月12日
 * 用户界面教程：https://www.codeqd.com/wp-content/uploads/2023/09/
 */

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace( /(?:^|\s)My class(?!\S)/g , '' )

检查给定类中是否存在元素
上面用于删除类的相同正则表达式也可以用于检查特定类是否存在：
/**
 * 时间：2019年8月12日
 * 用户界面教程：https://www.codeqd.com/wp-content/uploads/2023/09/
 */

if ( document.getElementById("MyElement").className.match(/(?:^|\s)我的类(?!\S)/) )
Javascript框架或插件
上面的代码都是纯 JavaScript，但常见的做法是使用  框架 或 库  来简化常见任务并修复错误。我一边写代码一边思考。边缘情况。 
虽然有些人可能会发现仅仅为了更改类而添加约 50KB 的框架是不合适的，但如果您执行大量 JavaScript 工作或可能具有异常浏览器行为的操作，则该插件仍然非常有价值。公司。 
（非常粗略地说，库是一组为特定任务设计的工具，而任务和任务的框架通常包含多个完整的库。
下面的示例展示了如何使用 jQuery，它可能是最常用的 JavaScript 库（尽管还有其他值得探索的库）。 

（注意，这里的$是一个jQuery对象。）
使用jQuery控制元素类
使用jQuery可以大大简化我们的代码，我们可以将下面的代码与上面的代码进行比较：
/**
 * 时间：2019年8月12日
 * 用户界面教程：https://www.codeqd.com/wp-content/uploads/2023/09/
 */

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('我的班级') )