什麼是用普通JavaScript的「hasClass」函數？

170

你如何做jQuery的hasClass與普通的醇'JavaScript？例如，什麼是用普通JavaScript的「hasClass」函數？

<body class="foo thatClass bar">

什麼是JavaScript的方式來問，如果<body>有thatClass？

來源

2011-02-23 Kyle

我想你將不得不解析'class'屬性（它在多個類別的情況下，將按照隨機順序多類名稱用空格分隔）並檢查您的班級名稱是否在其中。不是非常困難，但仍然非常不方便，如果不是爲了學習目的:) – 2011-02-23 00:06:19

不知道我是否遲到派對，但一個很好的網站，可以替代jQuery功能http://youmightnotneedjquery.com – ithil 2014-06-26 07:59:46

您可以檢查element.className是否匹配/\bthatClass\b/。
\b符合分詞。

或者，你可以使用jQuery的自己的實現：

var className = " " + selector + " "; 
if ((" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1)

要回答你的更普遍的問題，你可以看看在github jQuery的source code或在源hasClass specifically in this source viewer。

來源

2011-02-23 00:07:05 SLaks

+1 jQuery的實現（因爲已經擡頭了（這是正確的英文嗎？）實際上是什麼'rclass'）） – 2011-02-23 00:15:12

'\ b'不匹配「class-anotherClass」嗎？ – 2011-02-23 01:00:29

[是的，它會]（http://jsfiddle.net/UHxr2/） – 2011-02-23 01:55:23

存儲正在使用的類的屬性是className。

所以，你可以說：

if (document.body.className.match(/\bmyclass\b/)) { 
    .... 
}

如果你想顯示你的jQuery是如何做的一切的位置，我會建議：

http://code.jquery.com/jquery-1.5.js

來源

2011-02-23 00:11:02 Orbling

非常好。 'match'屬性再次得心應手！真的jQuery做的東西超過JavaScript中可能的嗎？！如果沒有，jQuery只是一個不必要的縮寫。 – animaacija 2015-01-04 21:35:19

這也匹配'myclass-something'，因爲'\ b'匹配連字符。 – 2015-06-04 22:20:29

@animaacija所有的JavaScript庫/插件基本上都是javascript shorthands，因爲它們是用javascript構建的。事情是：短褲總是必要的。永遠不要重新發明輪子。 – 2016-07-14 09:06:04

，最有效的內襯

返回一個布爾值（與Orbling的答案相反）
在具有class="thisClass-suffix"的元素上搜索thisClass時，不返回誤報。
是與每一個瀏覽器的兼容縮減到至少IE6

function hasClass(target, className) { 
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className); 
}

來源

2013-03-05 14:33:21 raveren

451

只需使用classList：

if (document.body.classList.contains('thatClass')) { 
    // do some stuff 
}

的classList其他用途：

document.body.classList.add('thisClass'); 
// $('body').addClass('thisClass'); 

document.body.classList.remove('thatClass'); 
// $('body').removeClass('thatClass'); 

document.body.classList.toggle('anotherClass'); 
// $('body').toggleClass('anotherClass');

瀏覽器支持：

鉻8.0
火狐3.6
IE 10
歌劇11.50
的Safari 5.1

classList Browser Support

來源

2013-05-02 12:00:08 Damien

+20

很乾淨。美麗。 – franzlorenzon 2013-05-21 12:01:54

**這在IE8 **中不受支持。 IE8可以檢索'.classList'作爲一個字符串，但它不會識別更現代的方法，如'.classList.contains（）' – iono 2013-09-10 04:14:30

我不能等待我們完全放棄IE9支持的那一天，我想我有再等10年... – Norris 2014-05-24 12:19:16

那麼所有上述答案都很不錯，但這裏有一個小小的簡單函數。它工作得很好。

function hasClass(el, cn){ 
    var classes = el.classList; 
    for(var j = 0; j < classes.length; j++){ 
     if(classes[j] == cn){ 
      return true; 
     } 
    } 
}

來源

2014-09-03 03:00:15 j0hnstew

如果'classList'有一個'contains'方法，迭代的意義是什麼？ – Oriol 2016-06-12 17:20:07

// 1. Use if for see that classes: 
 

 
if (document.querySelector(".section-name").classList.contains("section-filter")) { 
 
    alert("Grid section"); 
 
    // code... 
 
}

<!--2. Add a class in the .html:--> 
 

 
<div class="section-name section-filter">...</div>

來源

2015-02-24 23:45:26 StiveAZ

@greg_diesel：不要阻止回答！針對常見問題的新解決方案更值得歡迎。 – raveren 2015-03-10 08:08:37

@Raveren雖然歡迎新老問題的解決方案，但這個特殊的答案並沒有帶來什麼新鮮事。它只會給這個問題增加噪音。 – 2016-11-03 21:46:49

這一個很好的解決方案是用班級列表，包含工作。

我沒有這樣說：

... for (var i = 0; i < container.length; i++) { 
     if (container[i].classList.contains('half_width')) { ...

因此，你需要你的元素，並檢查類的列表。如果其中一個類與您搜索的類相同，則返回true，否則返回false！

來源

2015-03-06 08:32:37

我用一個簡單/最小的解決方案，一條線，跨瀏覽器，對舊版瀏覽器的工作原理，以及：

/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'

這種方法是偉大的，因爲不需要polyfills，如果你使用他們的classList這是在性能方面更好。至少對於我來說。

更新：我做了一個微小的填充工具這是一個全方位的解決方案，我現在使用：

function hasClass(element,testClass){ 
    if ('classList' in element) { return element.classList.contains(testClass); 
} else { return new Regexp(testClass).exec(element.className); } // this is better 

//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill 
    return false; 
}

對於其他類的操作，請參閱完整文件here。

來源

2015-04-20 15:19:02 thednp

這次旅行將在'notmyClassHere'類中進行嗎？ – Teepeemm 2015-10-04 00:00:30

你也可以問你的類是否不存在'！/myClass/.test（document.body.className）'注意'！'符號。 – thednp 2015-10-04 00:56:27

我不是在談論否定這個問題。我在想，如果類名是'thisIsmyClassHere'，你的函數將不正確地返回true。 – Teepeemm 2015-10-04 02:48:32

您對這種方法有什麼看法？

<body class="thatClass anotherClass"> </body> 

var bodyClasses = document.querySelector('body').className; 
var myClass = new RegExp("thatClass"); 
var trueOrFalse = myClass.test(bodyClasses);

https://jsfiddle.net/5sv30bhe/

來源

2015-05-04 21:55:55 Marian07

我認爲你在混合你的變量名（active === myClass？）。但是這種方法不會給'class =「nothatClassIsnt」'帶來誤判嗎？ – Teepeemm 2015-10-03 23:59:39

這種 'hasClass' 功能可在IE8 +，Firefox和Chrome：

hasClass = function(el, cls) { 
    var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'), 
     target = (typeof el.className === 'undefined') ? window.event.srcElement : el; 
    return target.className.match(regexp); 
}

來源

2015-05-11 14:57:30 manufosela

使用類似：

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');

來源

2015-08-08 03:28:51

這不等於'myHTMLSelector.classList.indexOf（'the-class'）'嗎？你最後還不想''= 0'？ – Teepeemm 2015-10-03 23:58:08

如果'classList'有一個'contains'方法，使用'[] .indexOf'有什麼意義？ – Oriol 2016-06-12 17:19:40

hasClass功能：

HTMLElement.prototype.hasClass = function(cls) { 
    var i; 
    var classes = this.className.split(" "); 
    for(i = 0; i < classes.length; i++) { 
     if(classes[i] == cls) { 
      return true; 
     } 
    } 
    return false; 
};

個

addClass功能：

HTMLElement.prototype.addClass = function(add) { 
    if (!this.hasClass(add)){ 
     this.className = (this.className + " " + add).trim(); 
    } 
};

removeClass功能：

HTMLElement.prototype.removeClass = function(remove) { 
    var newClassName = ""; 
    var i; 
    var classes = this.className.replace(/\s{2,}/g, ' ').split(" "); 
    for(i = 0; i < classes.length; i++) { 
     if(classes[i] !== remove) { 
      newClassName += classes[i] + " "; 
     } 
    } 
    this.className = newClassName.trim(); 
};

來源

2016-11-07 13:14:08 Gawin

什麼是用普通JavaScript的「hasClass」函數？

回答

相關問題