快捷導航

如何用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") ) ;

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)打字效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)打字效果的方法,可實現(xiàn)文字陸續(xù)出現(xiàn)的打字效果,涉及javascript時間函數(shù)及頁面元素獲取的相關(guān)技巧,需要的朋友可以參考下
2015-07-07
js設(shè)置function參數(shù)默認值(適合沒有傳參情況)
div+css模擬js信息框的類庫時遇到一個問題當沒有傳遞參數(shù)過去時自動使用提示信息作為窗口標題，具體的實現(xiàn)如下
2014-02-02
js 轉(zhuǎn)義字符及URI編碼詳解
本文主要介紹了轉(zhuǎn)義字符及URI編碼的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
前端如何使用Cesium加載三維模型詳細攻略
三維模型數(shù)據(jù)格式種類多樣,常見的有DAE、OBJ、STL、3DS?MAX、CLM、IFC等數(shù)據(jù)格式,下面這篇文章主要給大家介紹了關(guān)于前端如何使用Cesium加載三維模型的相關(guān)資料,需要的朋友可以參考下
2024-05-05
基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學習吧
2015-09-09
JS跳轉(zhuǎn)手機站url的若干注意事項
去年年底開發(fā)了一個手機站平臺，遇到了很多坎，今天小編給大家分享下使用JS跳轉(zhuǎn)手機站url的若干注意事項，需要的朋友參考下吧
2017-10-10
JS?可選鏈的三種形勢及好處詳解
這篇文章主要為大家介紹了JS?可選鏈的三種形勢及好處詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
JS開發(fā)中百度地圖+城市聯(lián)動實現(xiàn)實時觸發(fā)查詢地址功能
這篇文章主要介紹了JS開發(fā)中百度地圖+城市聯(lián)動實現(xiàn)實時觸發(fā)查詢地址功能,需要的朋友可以參考下
2017-04-04
一文詳解CORS與預檢請求
這篇文章主要介紹了CORS與預檢請求，CORS是一套規(guī)范，指導瀏覽器和服務(wù)器之間如何進行跨域資源共享，當發(fā)送跨域請求時，瀏覽器會先發(fā)送一個OPTIONS方法的預檢請求。文中介紹的非常詳細，需要的同學可以參考一下
2023-04-04
JavaScript跨平臺的開源框架NativeScript
本文給大家分享的是一款使用javascript來構(gòu)建跨平臺原生移動應(yīng)用的開源框架--NativeScript，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構(gòu)建應(yīng)用UI，其抽象了各種原生平臺之間的不同。
2015-03-03