JS与jQuery获取指定class名称的3种方式总结

本文介绍了通过原生JavaScript和jQuery获取元素class名称的三种常用方式。涵盖使用element.className、element.classList以及jQuery的.attr()方法，并演示了如何结合这些方法实现样式修改与动画效果。

简介

在网页开发过程中，经常需要通过JavaScript获取元素的class名称以执行特定操作，例如修改样式或实现动画效果。本文将详细介绍如何利用JavaScript获取元素的class名称及其实际应用。

一、获取元素的class名称

获取元素的class名称主要有两种途径：使用原生JavaScript和使用jQuery。

1、通过原生JS获取元素的class名称

直接使用element.className可以获取元素的class名称，但它仅返回class名称的字符串形式。若需获取多个class名称且它们之间存在空格，则应使用element.classList。

element.classList是一个DOMTokenList对象，包含了当前元素的所有类名。我们可以通过它提供的方法add()、remove()、toggle()来添加、删除、切换类名。

示例代码：

// 获取元素的class名称
var element = document.querySelector('.qipa250');
// 获取当前元素的类名
console.log(element.className);
// 使用classList获取所有类名
console.log(element.classList);
// 添加类名
element.classList.add('new-class');
// 删除类名
element.classList.remove('qipa250');
// 切换类名
element.classList.toggle('new-class');

2、通过Jquery获取元素的class名称

可以通过jQuery提供的.attr()方法来获取class属性的值，也可以使用.addClass()、.removeClass()、.toggleClass()等方法来添加、删除、切换类名。

示例代码：

// 获取元素的class名称
var element = $('.qipa250');
// 获取当前元素的类名
console.log(element.attr('class'));
// 添加类名
element.addClass('new-class');
// 删除类名
element.removeClass('test');
// 切换类名
element.toggleClass('new-class');

二、应用

1、样式修改

// 获取元素的class名称
var element = document.querySelector('.qipa250');
// 添加类名，改变样式
element.classList.add('new-class');
element.style.color = '#ff0000';
// 切换类名，切换样式
element.classList.toggle('new-class');
element.classList.toggle('test');

2、动画效果实现

// 获取元素的class名称
var element = document.querySelector('.qipa250');
// 添加类名，实现动画效果
element.classList.add('animated', 'bounce');
// 5秒后删除类名，取消动画效果
setTimeout(function(){
element.classList.remove('animated', 'bounce');
}, 5000);

总结

到此这篇关于使用js/jquery获取指定class名称的3种方式总结的文章就介绍到这了,更多相关js/jquery获取指定class名称内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！