js怎麼選擇class,js類選擇

本文目錄一覽：

• 1、如何用javascript為元素添加class？
• 2、js怎麼獲取元素的class名
• 3、如何用js點擊class？

如何用javascript為元素添加class？

以給 body 標籤添加 class 為例

通過 jQuery

$( ‘body’).addClass( ‘class1 class2’ );

$( ‘body’ ).removeClass( ‘class1 class2’ );

支持 classList 的高級瀏覽器（IE10+，Chrome，Firefox，Safari）

document.body.classList.add( ‘class1’, ‘class2’ );

document.body.classList.remove( ‘class1’, ‘class2’ );

不支持 classList 的瀏覽器只能通過 className 來添加

document.body.className += ‘ cl

[1]直接把樣式賦值給className

var odiv=document.getElementById(‘div1’);

odiv.className= div3

//這樣我們會得到 class =”div3″ 會直接把div2樣式給覆蓋掉;

[2]使用累加賦值給className

var odiv=document.getElementById(‘div1’);

odiv.className+=” “+div3  //樣式和樣式之間需要空隙 ，所以加個空字符串隔開

//這樣可以得到 class=”div2 div3″ 可以正常增加，但是我們在添加樣式的時候我們得考慮下他本身之前有沒有同名的樣式，如果有我們添加的話就會變成累贅 比如class=”div2 div3 div3″;

[3]檢測樣式原先之前是否有相同的樣式

var odiv=document.getElementById(‘div1’);　

function hasClass(element,csName){

element.className.match(RegExp(‘(\\s|^)’+csName+'(\\s|$)’)); //使用正則檢測是否有相同的樣式

}

[4]在[3]的基礎上我們就可以進行判斷性給元素添加樣式了　

var odiv=document.getElementById(‘div1’);　

function hasClass(element,csName){

return 　element.className.match(RegExp(‘(\\s|^)’+csName+'(\\s|$)’)); //使用正則檢測是否有相同的樣式

}　

function addClass(element,csName){

if(!hasClass(element,csName)){

element.className+=’ ‘+csName;

js怎麼獲取元素的class名

js獲取元素的class名：

var className=document.getElementsByClassName(‘names’)[0];

jquery獲取元素的class名：

var className = $(‘.names’).atrr(‘class’);

相關概念

getElementsByClassName() 方法返迴文檔中所有指定類名的元素集合，作為 NodeList 對象。

NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

如何用js點擊class？

HTML DOM3提供了getElementsByClassName()方法用以根據類名獲取元素，但是IE9以下瀏覽器並不支持。考慮兼容性，可以採用如下思路：獲取元素，判斷className屬性是否為目標類名，是的話即添加onclick事件。

下面實例演示——點擊class為test1的a標籤彈出提示框:

1、HTML結構

div

a class=”test1″ href=”#”第一項/a

a class=”test2″ href=”#”第二項/a

/div

2、javascript代碼

window.onload = function(){

var a = document.getElementsByTagName(“a”);

for(i=0;ia.length;i++){

if(a[i].className == “test1”){

a[i].onclick = function(){alert(this.innerHTML+”被點擊了”)}

}

}

}

3、效果演示