在前端开发中，有时候需要使用 JavaScript 动态地操作 HTML 元素的 class 属性。为了正确地操作 class 属性，我们需要先判断一个元素是否已经拥有某个特定的 CSS 类。
方法 1：使用 classList API
JavaScript 提供了一个 classList API，可以方便地操作元素的 class 属性。通过调用该 API 中的 contains 方法，我们可以检查一个元素是否已经包含指定的 CSS 类。下面是一个示例代码：
----- --------- - -------------------------------------- -- ------------------------------------------ - -- -- --------- -
如上所示，我们首先获取了一个带有 .my-element 类的元素，然后使用 classList.contains 方法检查该元素是否还包含另一个 .my-class 类。如果包含，则执行相应的操作。
方法 2：使用 className 属性
除了使用 classList API 外，我们还可以通过访问元素的 className 属性来判断其是否包含某个特定的 CSS 类。这种方法比较简单，但是不够直观，并且在处理复杂的 class 属性时可能会出现问题。下面是一个示例代码：
----- --------- - -------------------------------------- -- ---------------------------------------- --- --- - -- -- --------- -
如上所示，我们首先获取了一个带有 .my-element 类的元素，然后使用 indexOf 方法检查该元素的 className 属性中是否包含另一个 .my-class 类。如果包含，则执行相应的操作。
总结
以上两种方法都可以用来判断元素是否包含某个 CSS 类。但是，推荐使用 classList API 来进行操作，因为它更加直观、易于理解，并且在处理复杂的 class 属性时更加可靠。
无论使用哪种方法，都需要注意以下几点：
- 在 HTML 中，class 属性可以包含多个 CSS 类。因此，在判断元素是否包含某个 CSS 类时，需要考虑到这一点。
- 在 JavaScript 中，class 属性和 className 属性实际上都是字符串类型。因此，在使用
classList.contains或indexOf方法之前，需要先将其转换为字符串类型。
最后，建议开发者根据具体情况选择合适的方法来判断元素是否包含某个 CSS 类，并在实际操作中注意代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27054