zoukankan      html  css  js  c++  java
  • js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式
    css(name):访问第一匹配元素的样式属性
    css(name,value):在所有匹配的元素中,设置一个样式属性的值
    css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性
    css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值

    Javascript中获取样式的值       

           function css(obj, attr, value) {
                switch (arguments.length) {
                    case 2:
                        if (typeof arguments[1] == "object") {    //批量设置属性
                            for (var i in attr) obj.style[i] = attr[i]
                        }
                        else {    // 读取属性值
                            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
                        }
                        break;
                    case 3:
                        //设置属性
                        obj.style[attr] = value;
                        break;
                    default:
                        return "";
                }
            }

    采用这种方式同样实现了 JQuery的效果。

    JQuery中有addClass,removeClass,toggleClass
    addClass(class):为每个匹配的元素添加指定的类名
    removeClass(class):从所有匹配的元素中删除全部或者指定的类
    toggleClass(class):如果存在(不存在)就删除(添加)一个类

          function hasClass(obj, cls) {
                return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
            }
    
            function addClass(obj, cls) {
                if (!this.hasClass(obj, cls)) obj.className += " " + cls;
            }
    
            function removeClass(obj, cls) {
                if (hasClass(obj, cls)) {
                    var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
                    obj.className = obj.className.replace(reg, ' ');
                }
            }

    采用这种方式同样实现了 JQuery的效果。

  • 相关阅读:
    Css预编语言以及区别
    CSS完成视差滚动效果
    理解ASP.NET Core验证模型 Claim, ClaimsIdentity, ClaimsPrincipal
    EF Expression 扩展
    总结 jion,group join 基于方法的查询与查询表达式 对比
    EF 查询表达式 join
    EF中 GroupJoin 与 Join
    css中“~”和“>”是什么意思
    jquery基于form-data文件上传
    针对 easyui boolean 布尔值 的处理
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4951935.html
Copyright © 2011-2022 走看看