如何用js判斷dom是否有存在某class的值
更新時間：2017年02月13日 09:02:26 作者：孟然
本文主要介紹了如何用javascript判斷dom是否有存在某class的值。具有很好的參考價值，下面跟著小編一起來看下吧
例如：
<html class="no-js"> <head> </head> <body> </body> </html>
判斷html節(jié)點的class是否有no-js。
1.jquery的實現(xiàn)方式
$("html").hasClass('no-js');
jquery源碼的實現(xiàn)方式：
var rclass = /[\t\r\n\f]/g;
jQuery.fn.extend({
hasClass: function(selector) {
var className = " " + selector + " ",
i = 0,
l = this.length;
for (; i < l; i++) {
if (this[i].nodeType === 1 &&
(" " + this[i].className + " ").replace(rclass, " ").indexOf(className) > -1) {
return true;
}
}
return false;
}
})
2.js的實現(xiàn)方式
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');
3.H5的classList
說明下：
- 字符串的indexOf方法是無法區(qū)分.no-js和.no-js-indeed這樣的類；
- 類名的分隔符可能不是空格，還有可能是\t等。
代碼：
var hasClass = (function(){
var div = document.createElement("div") ;
if( "classList" in div && typeof div.classList.contains === "function" ) {
return function(elem, className){
return elem.classList.contains(className) ;
} ;
} else {
return function(elem, className){
var classes = elem.className.split(/\s+/) ;
for(var i= 0 ; i < classes.length ; i ++) {
if( classes[i] === className ) {
return true ;
}
}
return false ;
} ;
}
})() ;
alert( hasClass(document.documentElement, "no-js") ) ;
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript實現(xiàn)打字效果的方法,可實現(xiàn)文字陸續(xù)出現(xiàn)的打字效果,涉及javascript時間函數(shù)及頁面元素獲取的相關技巧,需要的朋友可以參考下2015-07-07
js設置function參數(shù)默認值(適合沒有傳參情況)
div+css模擬js信息框的類庫時遇到一個問題當沒有傳遞參數(shù)過去時自動使用提示信息作為窗口標題，具體的實現(xiàn)如下2014-02-02
本文主要介紹了轉義字符及URI編碼的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
三維模型數(shù)據格式種類多樣,常見的有DAE、OBJ、STL、3DS?MAX、CLM、IFC等數(shù)據格式,下面這篇文章主要給大家介紹了關于前端如何使用Cesium加載三維模型的相關資料,需要的朋友可以參考下2024-05-05
基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學習吧2015-09-09
去年年底開發(fā)了一個手機站平臺，遇到了很多坎，今天小編給大家分享下使用JS跳轉手機站url的若干注意事項，需要的朋友參考下吧2017-10-10
這篇文章主要為大家介紹了JS?可選鏈的三種形勢及好處詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
JS開發(fā)中百度地圖+城市聯(lián)動實現(xiàn)實時觸發(fā)查詢地址功能
這篇文章主要介紹了JS開發(fā)中百度地圖+城市聯(lián)動實現(xiàn)實時觸發(fā)查詢地址功能,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了CORS與預檢請求，CORS是一套規(guī)范，指導瀏覽器和服務器之間如何進行跨域資源共享，當發(fā)送跨域請求時，瀏覽器會先發(fā)送一個OPTIONS方法的預檢請求。文中介紹的非常詳細，需要的同學可以參考一下2023-04-04
JavaScript跨平臺的開源框架NativeScript
本文給大家分享的是一款使用javascript來構建跨平臺原生移動應用的開源框架--NativeScript，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構建應用UI，其抽象了各種原生平臺之間的不同。2015-03-03