Qual é a function “hasClass” com JavaScript simples?

Como você faz hasClass do jQuery com JavaScript simples? Por exemplo,

  

Qual é a maneira JavaScript de perguntar se o tem o thatClass ?

Você pode verificar se element.className corresponde a /\bthatClass\b/ .
\b corresponde a uma quebra de palavra.

Ou você pode usar a própria implementação do jQuery:

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

Para responder à sua pergunta mais geral, você pode ver o código-fonte do jQuery no github ou na fonte do hasClass especificamente neste visualizador de código-fonte .

Simplesmente use classList :

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

Outros usos de 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'); 

Suporte de Navegador:

  • Chrome 8.0
  • Firefox 3.6
  • IE 10
  • Opera 11,50
  • Safari 5.1

Suporte para navegador classList

O forro mais eficaz que

  • retorna um booleano (em oposição à resposta de Orbling)
  • Não retorna um falso positivo ao procurar por thisClass em um elemento que tenha class="thisClass-suffix" .
  • é compatível com todos os navegadores até pelo menos o IE6

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

O atributo que armazena as classs em uso é className .

Então você pode dizer:

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

Se você quiser um local que mostre como o jQuery faz tudo, sugiro:

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

 // 1. Use if for see that classs: if (document.querySelector(".section-name").classList.contains("section-filter")) { alert("Grid section"); // code... } 
  
...

Eu uso uma solução simples / mínima, uma linha, cross-browser e também funciona com navegadores legados:

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

Este método é ótimo porque não requer polyfills e se você usá-los para classList é muito melhor em termos de desempenho. Pelo menos para mim.

Atualização: Eu fiz um pequeno polyfill que é uma solução completa que uso agora:

 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; } 

Para a outra manipulação de class, veja o arquivo completo aqui .

function hasClass:

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

function addClass:

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

function removeClass:

 HTMLElement.prototype.removeClass = function(remove) { var newClassName = ""; var i; var classs = 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(); }; 

Uma boa solução para isso é trabalhar com classList e contém.

Eu fiz assim:

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

Então você precisa do seu elemento e verifique a lista das classs. Se uma das classs é a mesma que você procura, ela retornará true se não retornar false!

Use algo como:

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

Bem, todas as respostas acima são muito boas, mas aqui está uma pequena function simples que eu preparei. Isso funciona muito bem.

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

Esta function ‘hasClass’ funciona no IE8 +, FireFox e 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); } 
 if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) { // has "thatClass" } 

O que você acha dessa abordagem?

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

https://jsfiddle.net/5sv30bhe/