快捷導(dǎo)航

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

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

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

簡(jiǎn)介

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

一、獲取元素的class名稱

獲取元素的class名稱有兩種方式：通過(guò)原生JS和通過(guò)Jquery。

1、通過(guò)原生JS獲取元素的class名稱

直接使用 element.className 可以獲取元素的class名稱，但是它只能獲取到元素的class名稱串，如果想要獲取到多個(gè)class名稱，并且它們之間存在空格，則需要使用 element.classList 。

element.classList 是一個(gè) DOMTokenList 對(duì)象，包含了當(dāng)前元素的所有類(lèi)名，我們可以通過(guò)它提供的方法 add()、remove()、toggle() 來(lái)添加、刪除、切換類(lèi)名。

示例代碼：

// 獲取元素的class名稱
var element = document.querySelector('.qipa250');
// 獲取當(dāng)前元素的類(lèi)名
console.log(element.className);
// 使用classList獲取所有類(lèi)名
console.log(element.classList);
// 添加類(lèi)名
element.classList.add('new-class');
// 刪除類(lèi)名
element.classList.remove('qipa250');
// 切換類(lèi)名
element.classList.toggle('new-class');

2、通過(guò)Jquery獲取元素的class名稱

可以通過(guò) Jquery 提供的 .attr() 方法來(lái)獲取 class 屬性的值，也可以使用 .addClass()、.removeClass()、.toggleClass() 等方法來(lái)添加、刪除、切換類(lèi)名。

示例代碼：

// 獲取元素的class名稱
var element = $('.qipa250');
// 獲取當(dāng)前元素的類(lèi)名
console.log(element.attr('class'));
// 添加類(lèi)名
element.addClass('new-class');
// 刪除類(lèi)名
element.removeClass('test');
// 切換類(lèi)名
element.toggleClass('new-class');

二、應(yīng)用

1、樣式修改

// 獲取元素的class名稱
var element = document.querySelector('.qipa250');
// 添加類(lèi)名，改變樣式
element.classList.add('new-class');
element.style.color = '#ff0000';
// 切換類(lèi)名，切換樣式
element.classList.toggle('new-class');
element.classList.toggle('test');

2、動(dòng)畫(huà)效果實(shí)現(xiàn)

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