zoukankan      html  css  js  c++  java
  • JS原生addClass、removeClass实现

    用jQuery的addClass()、removeClass()时手痒,想了解下原生JavaScript是怎么实现的这类功能。
    方法一:还是用到了其他函数辅助,所以看着简短些。

    function addClass(ele,classname){
            ele.className += " " + classname;//
        };
    function removeClass(ele,classname){
             ele.className = ele.className.replace(classname,"");
        }

    思路:采用replace()的替换功能实现删除.
    关于replace()详细参见http://www.w3school.com.cn/jsref/jsref_replace.asp

    方法二:利用基础JavaScript,不采用其他函数实现

        //为元素添加新classname
        function addClassName(ele,classname){
         //判断以前是否为有class
            if(!ele.className){
                ele.className = classname;
            }else{
                newclassname = ele.className;
                newclassname += " ";
                newclassname += classname;
                ele.className = newclassname;
            }
        }
        //原生JavaScript不使用其他内部封装好的函数比较难以实现删除class,以下方法不适用于直接删除在行内设置了class的情况.一般在做鼠标事件时通过JS添加的class,可以通过数组,先把行内class储存在数组,然后需要时,在用这个储存好的数组在需要的时候更新.
    
    var arrClassName=[];
       //初始化其他兄弟元素的classname
            function updateClassName(ele){
                for(var i = 1;i < ele.parentNode.childNodes.length;i += 4){
                    ele.parentNode.childNodes[i].className = arrClassName[i];
                }
            }
  • 相关阅读:
    实验
    ls -l 详解
    实验
    B
    2.02_Python网络爬虫分类及其原理
    2.01_Python网络爬虫概述
    DA_03_linux网络配置及其远程连接
    DA_01_linux_物理机局域网工作机制
    Hadoop_01_Apache Hadoop概述
    13_Redis_持久化
  • 原文地址:https://www.cnblogs.com/6long/p/6044504.html
Copyright © 2011-2022 走看看