普通JavaScript的“ hasClass”函数是什么?

2020/10/02 22:01 · javascript ·  · 0评论

如何hasClass使用普通的JavaScript制作jQuery 例如,

<body class="foo thatClass bar">

什么是JavaScript的方式来询问是否<body>thatClass

您可以检查是否element.className匹配/\bthatClass\b/
\b匹配一个单词中断。

或者,您可以使用jQuery自己的实现:

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

为了回答您的更一般性的问题,您可以在github上查看jQuery的源代码,或者hasClass在此源代码查看器中专门查看源代码

只需使用classList.contains()

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');

浏览器支持:

  • Chrome 8.0
  • Firefox 3.6
  • IE 10
  • 歌剧11.50
  • Safari 5.1

classList 浏览器支持

最有效的一种衬垫

  • 返回一个布尔值(与Orbling的答案相对)
  • 在搜寻thisClass具有的元素时,不会传回假阳性class="thisClass-suffix"
  • 与每个浏览器兼容,最低到IE6

function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
// 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>

存储使用中的类的属性是className

所以你可以说:

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

如果您想要一个可以显示jQuery如何执行所有操作的位置,我建议:

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

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

我使用一种简单/最小的解决方案,一个行,跨浏览器,并且也可以与旧版浏览器一起使用:

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

这种方法非常有用,因为它不需要polyfill,如果您使用它们,classList在性能方面会更好。至少对我来说。

更新:我做了一个很小的polyfill,这是我现在使用的全面解决方案:

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

有关其他类的操作,请参见此处的完整文件

一个很好的解决方案是使用classList和contains。

我这样做是这样的:

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

因此,您需要您的元素并检查类列表。如果其中一个类别与您搜索的类别相同,则返回true,否则返回false!

使用类似:

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
    // has "thatClass"
}

此“ 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);
}

那么以上所有答案都很好,但这是我提出的一个简单的小功能。效果很好。

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

您如何看待这种方法?

<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/

这是最简单的方法:

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");
         }
    }
}
本文地址:http://javascript.askforanswer.com/putongjavascriptde-hasclasshanshushishenme.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!