使用js/jquery獲取指定class名稱的3種方式總結(jié)

更新時間：2024年03月18日 10:18:04 作者：徊憶羽菲

獲取class的值其實非常簡單,這篇文章主要給大家介紹了關(guān)于總結(jié)使用js/jquery獲取指定class名稱的3種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

簡介

在開發(fā)網(wǎng)頁時，我們經(jīng)常需要通過JS獲取元素的class名稱進行一些操作，比如樣式修改、動畫效果實現(xiàn)等。本文將介紹JS如何獲取元素的class名稱及其應(yīng)用。

一、獲取元素的class名稱

獲取元素的class名稱有兩種方式：通過原生JS和通過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');

二、應(yīng)用

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、動畫效果實現(xiàn)

// 獲取元素的class名稱
var element = document.querySelector('.qipa250');
// 添加類名，實現(xiàn)動畫效果
element.classList.add('animated', 'bounce');
// 5秒后刪除類名，取消動畫效果
setTimeout(function(){
element.classList.remove('animated', 'bounce');
}, 5000);