zoukankan      html  css  js  c++  java
  • 【实用总结】DOM节点className操作

    经常用到的小工具函数,每次用到都重写一遍,有点浪费体力,于是决定分阶段整理下,需要用到的时候就直接拷过来用了~

    对于dom节点的className,常用操作不外乎增、删、查(改可以用增+删事先),由于代码比较简单,直接上源码+接口注释

    /**
     * @description 给节点添加类
     * @param {DOMObject} node dom节点
     * @param {String} className 即将添加的类名
    */
    function addClass(node, className){
        var addClassName = trim(className);
        var oriClassName = node.className;
        if(oriClassName.indexOf(addClassName)===-1){
            node.className = oriClassName+ ' ' +className;
        }
    }
    
    /**
     * @description 删除节点某个类
     * @param {DOMObject} node dom节点
     * @param {String} className 即将删除的类名
    */
    function removeClass(node, className){
        var reg = new RegExp('\\b'+ trim(className) +'\\b', 'g');
        node.className = node.className.replace(reg, '');
    }
    
    /**
     * @description 判断节点是否具有某个类
     * @param {DOMObject} node dom节点
     * @param {String} className 查询的类名
     * @return {Boolean} true-有,false-没有
    */
    
    function hasClass(node, className){
        return node.className.indexOf(trim(className))!==-1;
    }
    
    /**
     * @description 删除字符串首尾空格
     * @param {String} str 原始字符串
     * @return {String} 删除了首位空格后的字符串
     * @example trim('   hello world ') === 'hello world'
    */
    function trim(str){
        return str.replace(/^\s+/, '').replace(/\s+$/, '');
    }

    其他如同时添加多个类、同时删除多个类等,实现原理类似,不赘述

  • 相关阅读:
    拉格朗日插值
    [数论] hdu 5974 A Simple Math Problem (数论gcd)
    混合图欧拉回路
    上下界网络流
    HDU 6623 Minimal Power of Prime(数学)
    图的连通度
    最小点权覆盖和最大点权独立集
    最大权闭合子图(最小割,蕴含式最大获利问题)
    CodeForces Goodbye 2017
    网络流建模汇总
  • 原文地址:https://www.cnblogs.com/chyingp/p/js_className.html
Copyright © 2011-2022 走看看