Como você faz jQuery hasClasscom JavaScript simples? Por exemplo,
<body class="foo thatClass bar">Qual é a maneira do JavaScript de perguntar se <body>existe thatClass?
Respostas:
Você pode verificar se element.classNamecorresponde /\bthatClass\b/.
\bcorresponde 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 consultar o código-fonte do jQuery no github ou na fonte, hasClassespecificamente neste visualizador de código-fonte .
rclassrealmente é;))
\bcorresponderia a "thatClass-anotherClass"?
/[\t\r\n\f]/g. Também é bom mencionar que /\bclass\b/pode falhar para nomes de classes com -sinal de menos (exceto que funcione bem), é por isso que a implementação do jQuery é melhor e mais confiável. Por exemplo: /\bbig\b/.test('big-text')retorna verdadeiro em vez de falso esperado.
Basta usar classList.contains():
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 do navegador:
.classListcomo uma string, mas não vai reconhecer os métodos mais modernos, tais como.classList.contains()
O forro mais eficaz que
thisClassem um elemento que possui class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
O atributo que armazena as classes em uso é className.
Então você pode dizer:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Se você deseja um local que mostre como o jQuery faz tudo, sugiro:
matchatributo é útil novamente! Realmente jQuery faz algo mais do que é possível em JavaScript ?! Caso contrário, o jQuery é apenas um peso desnecessário de taquigrafia.
myclass-something, como \bcorresponde ao hífen.
// 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>Função 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;
};Função addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};função 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();
};Eu uso uma solução simples / mínima, uma linha, entre navegadores e também funciona com navegadores herdados:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Esse método é ótimo porque não requer polyfills e, se você usá-los classList, é muito melhor em termos de desempenho. Pelo menos para mim.
Atualização: criei 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 classe, veja o arquivo completo aqui .
notmyClassHere?
!/myClass/.test(document.body.className)observar o !símbolo.
thisIsmyClassHere.
Uma boa solução para isso é trabalhar com classList e contains.
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 de classes. Se uma das classes for a mesma que você procura, ela retornará true, caso contrário, retornará false!
Use algo como:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? Você também não quer >=0no final?
[].indexOfse classListtem um containsmétodo?
myHTMLSelector.classList.indexOf('the-class')retorna o erro que, myHTMLSelector.classList.indexOf is not a functionporque myHTMLSelector.classListnão é uma matriz. Mas acho que ao chamá-lo usando Array.prototypealguma conversão acontece. Isso pode suportar navegadores mais antigos, embora containstenha um suporte muito bom.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Essa função '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);
}Bem, todas as respostas acima são muito boas, mas aqui está uma pequena função simples que eu criei. Funciona muito bem.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListtem um containsmétodo?
O que você acha dessa abordagem?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Aqui está a maneira mais simples:
var allElements = document.querySelectorAll('*');
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("class")) {
//console.log(allElements[i].className);
if (allElements[i].className.includes("_the _class ")) {
console.log("I see the class");
}
}
}
classpropriedade (que no caso de várias classes terá vários nomes de classes em ordem aleatória, separados por um espaço) e verificar se o nome da sua classe está nela. Não terrivelmente difícil, mas ainda terrivelmente inconveniente, se não para fins de aprendizagem :)