<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title>

</head>

<body>

<div class="div1" id="box1"></div>

<input type="button" value="按钮" id="btn1"/>

<script>

    function addClass(obj,cls) {//obj:要添加classname的元素，cls:要添加的classname;

        //如果原来没有class：

        if(obj.className == ''){

            obj.className = cls;

        } else {

            //本来已经有class，新增class的情况：

            var arrclassname = obj.className.split(' ');//

            var index = arrIndexOf(arrclassname,cls);

            if(index == -1) {

                //如果要添加的class在原来的元素上不存在：

                obj.className += ' ' + cls;

            }

        }

    }

    function arrIndexOf(arr,v){//检测数组中是否有相同的值存在，并且返回它的位置；

        for(var i=0;i<arr.length;i++){

            if(arr[i] == v){

                return i;

            }

        }

        return -1;

    }

    function removeClass(obj,cls){

        //如果有class的话：

        if(obj.className != ''){

            var arrClassName = obj.className.split(' ');//对原有class进行拆分，看看是否包含需要移除的class，也就是传参cls的classname；

            var index = arrIndexOf(arrClassName,cls);

            //r如果有需要移除的class

            if(index != -1){

                arrClassName.splice(index,1);

                obj.className = arrClassName.join('');

            }

        }

    }

    function hasClass(obj,cls){

        var cls = cls || '';

        if( cls.replace(/\s/g,'').length == 0){

            return false;//当cls没有参数时,返回false;

        }else{

            return new RegExp(' ' + cls + '').test(' ' + obj.className);

        }

    }

    function toggleClass(obj,cls){

        hasClass(obj,cls) ? removeClass(obj,cls) : addClass(obj,cls);

    }

    function getByClass(oParent, sClass) {

        if (oParent.getElementsByClassName) {

            return oParent.getElementsByClassName(sClass);

        } else {  //IE 8 7 6

            var arr = [];

            var reg = new RegExp('\\b' + sClass + '\\b');

            var aEle = oParent.getElementsByTagName('*');

            for (var i = 0; i < aEle.length; i++) {

                if (reg.test(aEle[i].className)) {

                    arr.push(aEle[i]);

                }

            }

            return arr;

        }

    }

    var oBtn1 = document.getElementById('btn1');

    var oBox1 = document.getElementById('box1');

    oBtn1.onclick = function () {

        if( hasClass(oBox1,'div1') ){

            alert('hasclass');

        };

        alert( getByClass(document,'div1').length );

    }

</script>

</body>

</html>

　　

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法的更多相关文章

  1. 原生JS实现增加删除class

    <!DOCTYPE html> <html> <head> <style type="text/css"> .night-mode{ ...

  2. jquery与原生JS实现增加、减小字号功能

    预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 原生js 实现jquery addClass,removeClass

    代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...

  4. jQuery属性--addClass()和removeClass()

       addClass(class|fn) 概述 为每个匹配的元素添加指定的类名 参数 class  一个或多个要添加到元素中的CSS类名,请用空格分开: function(index, class) ...

  5. Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

    1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...

  6. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  7. React事件处理和原生JS事件处理

    1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发  ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...

  8. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  9. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

随机推荐

  1. Orchard源码：Logging

    试着用markdown写些东西.貌似博客园支持的还有问题,代码片段显示错位,还得另外上传图片.还是用普通方法写写随笔好了. Logging相对也是比较松耦合的模块,可以随时提取出来用在自己的项目中.其 ...

  2. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  3. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  4. Javascript面向对象编程（二）--- 构造函数的继承

    这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动 ...

  5. 更换SAP主界面右边区域背景主题

    1)  Tcode:SMW0(注意,最后面是零,不是英文字母O),选择第二个单选按钮 2)点击回车后,直接点击运行按钮. 3)在SAP WEB 资源库:对象显示 页面,点击:新建 4)创建对象名称,名 ...

  6. ArcGIS的许可文件问题

    ArcGIS我是从9.3版本开始使用的,当时破解非常麻烦,容易出现各种问题,当时生成的许可文件是一个单独的exe:后来10版本甚至10.1都出来,我还是使用的那个exe来生成许可文件,正常使用没有问题 ...

  7. Android项目实战（九）：CustomShapeImageView 自定义形状的ImageView

    一个两年前出来的第三方类库,具有不限于圆形ImageView的多种形状ImageView,项目开发必备 github下载地址:https://github.com/MostafaGazar/Custo ...

  8. iOS 获取系统音量

    //设置一个全局变量 UISilder * volumeViewSlider; #pragma mark - 获取系统音量 - (void)configureVolume { volumeView = ...

  9. 初始block，关于定义的几个小题目

    block的定义和C语言指针函数非常相似,就可以照着指针函数的方法去依葫芦画瓢就可以了 block中的^只是用来表示这是一个block对象,和函数指针中的*作用一样,只是一个标识符 下面有三个小例子来 ...

  10. IOS设计模式-抽象工厂

    抽象工厂的灵活性要比简单工程的灵活性强. 抽象工厂的UML图(第一次画UML图,可能关系和箭头的图意义有错误,但是请不要以建模规范去看图,以最基本的结合后面OC代码,理解相关关系): 抽象工厂原理:抽 ...