关于js封装框架类库之样式操作

在js中，对样式的操作我们并不感到陌生，在很多框架中都是用极少的代码，实现更强大的功能，在这做出一些的总结。存在不足还望指出！

1、封装一个添加css的方法（这篇引用了前面的框架结构）

在 js 中 获得样式, 默认只能获得行内样式, 类样式与外部样式无法获得，

可以使用计算样式来获得第一次的结果window.getComputedStyle  获得style对象 建议第一次用
 注意： 如果是 低版本的 IE 浏览器, 需要使用 currentStyle

YY.fn.extend({
                css: function(cssName,cssValue){
                    var style = window.getComputedStyle(this[0]);
                    return style[cssName];
                }
            })

I(function(){
                var res = I(‘div‘).css(‘backgroundColor‘);
                console.log(res);//获得样式值
                console.log(typeof res );//string
            })

上式是在一个参数情况下，获得可以获得样式值，如果两个参数值了，先考虑设置一个样式值的情况

YY.fn.extend({
                css: function (cssName,cssValue){
                    if(cssValue === undefined){//判断是否有样式值，没有的话就返回
                        return window.getComputedStyle(this[0])[cssName];
                    }else{
                        return this.each(function (){
                            this.style[cssName]= cssValue;//给每个dom添加属性
                        });
                    }
                }
            })

下面可以设置多个样式值

YY.fn.extend({
                css: function ( cssName, cssValue ) {
                    //判断是否为对象
                    if ( typeof cssName == ‘object‘ ) {
                        // 给 this 中每一个 dom 对象都添加 样式
                        return this.each(function () {
                            var k;
                            for ( k in cssName ) {
                                this.style[ k ] = cssName[ k ];
                            }　　　　　　　　　　　　　　　　　//在这也可以用each方法做，不过要注意this指向的对象       　　　　　　　　　　　　　　YY.each(cssName,function(i,v){       　　　　　　　　　　　　　　 _this.style[i] = cssName[ i ];       　　　　　　　　　　　　　　})*/
                        });

                    } else if ( cssValue === undefined ) {

                        return window.getComputedStyle( this[ 0 ] )[ cssName ];

                    } else { 

                        // 给所有的元素都添加 该样式
                        return this.each(function () {
                            this.style[ cssName ] = cssValue;
                        });
                    }
                }
             });
            

2、封装关于class系列方法

判断类样式是否有class方法

YY.fn.extend({
                hasClass: function ( cName ) {  // cName 可能会是多个类样式
                    // 判断 this[ 0 ] 是否具有该类样式
                    var has = false;//事先定义一个has
                    YY.each(this[ 0 ].className.split( ‘ ‘ ), function ( i, v ) {
                        // console.log( this );    // 包装对象
                        // console.log( v );        // 字符串
                        if ( v === cName ) {//此处不能用this，this指向字符串数组
                            has = true;
                            return false;
                        }
                    });
                    return has;

                }
            });

此处也可这么做

YY.fn.extend({
                hasClass: function (cName){
                    return ( ‘ ‘ + this[ 0 ].className + ‘ ‘ ).indexOf(
                                 ‘ ‘ + YY.trim( cName ) + ‘ ‘ ) != -1;
                }
            })

添加class的方法

YY.fn.extend({

                addClass: function (cName){
                    return this.each(function){
                        // 在处理 CSS 类样式的时候, 实际上就是累加数据
                        //采用临时变量对其赋值，那么会预先在内存中加载计算，解决浏览器性能问题
                        var className += ‘ ‘+ cName;
                        //对类样式的空格做出处理
                        this.className = YY.trim(className);
                    }
                }
            });

移除class的方法
第一种方法

YY.fn.extend({
                removeClass: function (cName){
                    return this.each(function(){
                        //将 DOM 对象的 className的字符串分割成数组
                        var arr = this.className.split(‘ ‘),
                        l = arr.length,
                        i;
                        for( i = 0;i < l;i++){
                            if(arr[i] === cName){
                                break;
                            }
                        }
                        //删除数组的第i项
                        arr.splice(i,1);
                        //然后把数组每一项放入一个新字符串
                        this.className = arr.join(‘ ‘);
                    })
                }

            });

第二种方法

YY.fn.extend({
                removeClass: function (cName){
                    // 将 this 中每一个 DOM 对象的 className 属性中符合 cName 的删除掉
                    return this.each(function(){
                        //获得DOM 对象的 className
                        var className = ‘ ‘+this.className+ ‘ ‘;
                        //直接将其替代为空
                    this.className = YY.trim(className.replace(‘ ‘+cName+‘ ‘,‘ ‘))
                    })
                }

            });

在实现以上方法基础上就很容易实现toggle方法

YY.fn.extend({
                toggleClass: function ( cName ) {
                    if ( this.hasClass( cName ) ) {
                        this.removeClass( cName );
                    } else {
                        this.addClass( cName );
                    }
                }
            });