设置元素的样式值setCss

在JS中给元素设置样式属性值,只能通过curEle.style.[attr]=value;这种方式给当前元素设置行内样式

setCss:给当前元素的某一个样式属性设置值(增加在行内样式上的)

function setCss(curEle,attr,value){

   //在JS中设置float样式值的话也需要处理兼容
   if(attr==="float"){
       curEle["style"]["cssFloat"]=value;
       curEle["style"]["styleFloat"]=value;
       return;
   }

   //如果打算设置的是元素透明度,需要设置两套样式来兼容所有浏览器
   if(attr==="opacity"){
       curEle["style"]["opacity"]=value;
       curEle["style"]["filter"]="alpha(opacity="+value*100+")";
       return;
   }  

   var reg=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
   if(reg.test(attr)){
       if(!isNan(value)){//--->判断传递进来的value值是否是一个有效数字,如果是有效数字,证明当前传递进来的值没有加单位,给补充单位
           value+=“px”;
       }
   }

   //对于某些样式属性,如果传递进来的值没有加单位,需要把单位默认的补充上     
   curEle["style"][attr]=value;
}

setGroupCss:批量设置元素样式值

 function setGroupCss(curEle,options){
 
    //通过检测options的数据类型,如果不是一个对象,则不能进行批量设置
     if(Object.prototype.toString.call(options)!=="[object Object]"){
         return;
     }

//遍历对象中的每一项,调取setCss方法一个个的进行设置即可
     for(var key in options){
        if(options.hasOwnProperty(key)){ //一般for-in遍历都是遍历私有属性
           this.setCss(curEle,key,options[key]);
        }
     }
}

css:jquery中提供了这样一个方法,即可以实现获取,也可以实现单独设置和批量设置

function css(curEle){
    var argTwo=arguments[1];
    if(typeof argTwo==="string"){ //第二个参数值是一个字符串,这样很有可能是获取样式;接下来还需判断是否存在第三个参数,若存在即为单独设置样式
        var argThree=arguments[2];
        if(typeof argThree==="undefined"){ //第三个参数不存在
             return this.getCss(curEle,argTwo);
        }
       //第三个参数存在即为单独设置
        this.setCss(curEle,argTwo,argThree);
    }
    argTwo= argTwo || 0;
    if(argTwo.toString()==="[object Object]"){
        this.setGroupCss(curEle,argTwo);
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,610评论 0 11
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,108评论 0 8
  • jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途...
    阿r阿r阅读 668评论 0 6
  • 一、CoreMotion框架介绍 我们知道有一些iOS的应用,会有一些特殊的要求,比如: 电子罗盘指南针之类的应用...
    执着丶执念阅读 13,550评论 21 80