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的效果。

  • 相关阅读:
    Eclipse背景颜色修改
    使用主键或者索引提高SQL语句效率的建议
    Mysql批量插入executeBatch测试
    【php增删改查实例】第十三节
    【php增删改查实例】第十二节
    【php增删改查实例】第十一节
    【php增删改查实例】第十节
    【php增删改查实例】第九节
    【php增删改查实例】第八节
    【php增删改查实例】第六节
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5978311.html
Copyright © 2011-2022 走看看