关于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 );
}
}
});
关于js封装框架类库之样式操作的更多相关文章
- 关于js封装框架类库之DOM操作模块(二)
上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...
- 关于js封装框架类库之DOM操作模块(一)
在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,而对其封装就是为了更好地进行DOM操作,提高浏览器的支持效率 现在给出一个案例:页面创建三个div,然后给其添加样式 ...
- 关于js封装框架类库之属性操作
在对DOM对象操作时,往往都要涉及到其属性的操作,为了提高开发效率,同时兼顾浏览器的性能,在这简单的封装了几个常见的属性.因为是模块化,在这只是引入了部分代码,其他代码在前几篇模块封装中有写.如有不足 ...
- 关于js封装框架类库之事件模块
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 例如: 鼠标操作点击事件时,事件对象中会获 ...
- 关于js封装框架类库之选择器引擎(一)
选择器模块之传统做法 var tag = function (tag){ return document.getElementsByTagName(tag); } var id = function ...
- 关于js封装框架类库之选择器引擎(二)
在上篇介绍了选择器的获取标签.id.类名的方法,现在我们在上篇基础上继续升级 1.问题描述:上篇get('选择器')已经实现,如果get方法里是一个选择器的父元素,父元素是DOM对象,那么如何获取元素 ...
- JS/jQuery--iframe框架内外元素的操作(转)
JS/jQuery--iframe框架内外元素的操作 原创 2017年12月07日 14:23:09 标签: js / iframe 28 两个问题: 如何在父页面操作iframe框架内的元素? 如何 ...
- DOM操作标签、事件绑定、jQuery框架/类库
DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...
- JS封装cookie操作函数实例(设置、读取、删除)
本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
随机推荐
- 《转》JAVA中PriorityQueue优先级队列使用方法
该文章转自:http://blog.csdn.net/hiphopmattshi/article/details/7334487 优先级队列是不同于先进先出队列的另一种队列.每次从队列中取出的是具有最 ...
- sar
雷达卫星数据产品介绍(一) — ERS 卫星 ERS-1 ERS-2 欧空局分别于 1991 年和 1995 年发射. 携带有多种有效载荷, 包括 侧视合成孔径雷达(SAR)和风向散射计等装置),由于 ...
- [android]清单文件中MAIN与LAUNCHER的区别
原文:[android]清单文件中MAIN与LAUNCHER的区别 MAIN 和 LAUNCHER,之前一直不注意这两个有区别,写程序的时候都放到一个filter中,前两天面试问到了,总结一下: MA ...
- 提示text还能输入多少字节
1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function( ...
- [Leetcode][Python]30: Substring with Concatenation of All Words
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 30: Substring with Concatenation of All ...
- uva 301 Transportation 铁路公司的阳谋 纯dfs暴力
题目比较难理解. 给出铁路的容量和站点数,以及几笔订单,要求算出如何盈利最大. 咋一看想贪心,但无法确定是最优解啊. 于是用dfs做,就两种状况,选与不选,先开一个每个站点的当前人数数组,假设要选,然 ...
- android基础5——使用资源
Android会基于当前的硬件.设备和语言配置来为某个资源标识符选择最合适的值. 1.在代码中使用资源 使用静态类R来访问资源.R类是基于外部资源而生的类,并且是在项目编译的时候创建的.R的每一个子类 ...
- 开发移动端web的一些知识
由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewpor ...
- Asp.net的对Excel文档的导入导出操作
刚刚初入职场,在休闲的时间写下了项目中用到的对Excel文档操作的方法以及总结,多的不说,直接上代码 public static void CreateExcel(DataSet ds, string ...
- EasyUI easyui-combobox 重复发送请求
今天在做个EasyUI easyui-combobox 下拉框动态连级的时候发现在选择一个值的时候发送了两次请求,这有点逆天呀~!!反人类~!必须和谐一开始以为是重复绑定了,重新审核了代码 确定没有~ ...