在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 );
}
}
});