`

JS实现addClass,removeClass,hasClass

 
阅读更多

js实现addClass,removeClass,hasClass

 

function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
function addClass(ele,cls) {
  if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
          var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}
 
//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test")
if(hasClass(document.getElementById("test"), "test")){//do something};

分享到:
评论
1 楼 xinfu2008ly 2011-12-02  
      

相关推荐

    原生js实现addClass,removeClass,hasClass方法

    主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下

    原生javascript实现addClass,removeClass,hasClass函数

    在原生JavaScript编程中,操作DOM元素的类(class)是日常开发中频繁进行的操作,这包括添加类(addClass)、删除类(removeClass)以及检查元素是否含有特定的类(hasClass)。虽然在现代Web开发中,经常使用jQuery...

    js实现addClass,removeClass,hasClass的函数代码

    在JavaScript中,`addClass`, `removeClass`, 和 `hasClass` 是三种常见的操作DOM元素类名(className)的方法。这些方法在创建交互式用户界面时非常有用,例如改变元素样式、响应事件或实现动画效果。让我们详细...

    使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    在这篇文章中,介绍了如何使用原生JavaScript(JS)代码来模拟jQuery库中的几个常用的类操作函数,即addClass、removeClass和hasClass。这些函数被广泛用于在DOM操作中动态地修改HTML元素的class属性。接下来,我们...

    原生js实现addclass,removeclass,toggleclasss实例

    原生JavaScript实现操作DOM元素的类(class)属性是前端开发中常见的需求。在现代Web开发中,虽然广泛使用了jQuery等库来简化操作,但在不依赖这些库的环境中,我们需要使用原生JavaScript来实现相同的功能。 首先...

    jayScript:一种不同的方法

    版本1 功能列表: addEvent removeEvent triggerEvent 选择selectById selectByClass selectByTag selectByQuery selectParentById selectParentByClass selectParentByTag 第一的addClass removeClass hasClass ...

    jQuery中hasClass()方法用法实例

    - **组合使用**:`hasClass()`常与其他jQuery方法(如`addClass()`,`removeClass()`)结合使用,以实现更复杂的DOM操作。 **4. 实例分析** 以下是一个简单的HTML和JavaScript示例,演示如何使用`hasClass()`方法...

    dollabill:从零开始的jQuery精简版实现

    我决定尝试从零开始实现jQuery,作为学习普通JS的一种方法。 但是,通过此练习,我知道了它对您有多大的作用,使我对jQuery有了更大的赞赏! dollabill DOM操作(dom_manip.js) addClass removeClass ...

    CSSClass:一个小的 (~2kB) 填充以将 .hasClass()、.addClass()、.removeClass() 和 .toggleClass() 添加到每个 HTML 元素

    CSSClass 是一个 JavaScript 微框架,它将函数 .hasClass、.addClass、.removeClass 和 .toggleClass 添加到 Element 原型中。 使用很简单。 包含脚本文件并仅使用函数(它们可以链接)。 您还可以通过在它们之间...

    meteor-jquery-svg-class:将 jquery 的 addremovehastoggle 类操作扩展到 SVGElement

    addClass removeClass hasClass 将类操作应用于SVGElement实例的SVGElement 。 Jquery 本身不会这样做 依赖关系 流星核心包 ##Credits 补丁的所有功劳归于 Justin McCandless(原版)和 Shaw(改进版),请参阅。...

    原生js实现class的添加和删除简单代码

    这里我们将详细讲解如何使用原生JavaScript编写`hasClass`、`addClass`和`removeClass`这三个函数,用于检测、添加和移除元素的类。 首先,`hasClass`函数是用来检查一个DOM元素是否已经包含了指定的类名。这个函数...

    javaScript给元素添加多个class的简单实现.docx

    我们可以基于`hasClass`函数来实现`removeClass`功能: ```javascript function removeClass(element, csName) { if (hasClass(element, csName)) { element.className = element.className.replace(new RegExp('...

    原生js实现查找/添加/删除/指定元素的class

    在本篇文章中,我们将探讨如何使用原生JavaScript实现查找、添加、删除以及指定元素的class。 1. **查找元素的class** 在JavaScript中,我们可以通过`className`属性来获取或设置一个元素的所有class。然而,`...

    基于JavaScript实现类名的添加与移除

    方法1:使用className属性...//hasClass addClass removeClass toogleClass var hasClass,addClass,removeClass; if('classList' in document.documentElement){ hasClass=function(obj,cname){ return obj.classList

Global site tag (gtag.js) - Google Analytics