原生js判斷某個(gè)元素是否有指定的class名的幾種方法
原生js判斷某個(gè)元素是否有指定的class名的幾種方法
蕪湖不蕪
2019-03-11 08:08:29
3 回答
白豬掌柜的
TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊
如果不考慮兼容IE10以下的話，可以用HTML5中的classList API，非常方便：
1 2 3 4 | var node = document.getElementById('demo'); if(node.classList.contains('test')){ console.log('包含 test 這個(gè)class'); } |
兼容的方式是采用className和getAttribute('class')方法：
1 2 3 4 5 6 7 8 9 10 11 | if (node.getAttribute('class')) { // 存在class屬性 // 方式1 if (node.getAttribute('class').indexOf('test') > -1) { console.log('包含 test 這個(gè)class'); }
// 方式2 if (node.className.indexOf('test') > -1) { console.log('包含 test 這個(gè)class'); } } |
九州編程
TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
【注意】以下方法只對class只有一個(gè)值的情況下操作
結(jié)構(gòu)部分：
1 2 3 4 5 | <div> <p>1</p> <p class="test">2</p> <p>3</p> </div> |
js部分：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ //第一種方法，用classList這個(gè)H5 API，有兼容性問題 if(p[i].classList.contains('test')==true){ console.log(p[i].innerHTML); } //第二種方法，用className這個(gè)屬性 if(p[i].className=='test'){ console.log(p[i].innerHTML) } //第三種方法，用getAttribute()這個(gè)方法 if(p[i].getAttribute("class")=='test'){ console.log(p[i].innerHTML); } } |
以上三種可以任選，條件是不考慮兼容性和多個(gè)class名的情況
慕桂英546537
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊
//第一種方法，用classList這個(gè)H5 API，有兼容性問題
if(p[i].classList.contains('test')==true){
console.log(p[i].innerHTML);
}
//第二種方法，用className這個(gè)屬性
if(p[i].className=='test'){
console.log(p[i].innerHTML)
}
//第三種方法，用getAttribute()這個(gè)方法
if(p[i].getAttribute("class")=='test'){
console.log(p[i].innerHTML);
}
}
以上三種可以任選，條件是不考慮兼容性和多個(gè)class名的情況
添加回答
舉報(bào)
0/150
提交
取消