美文网首页
设置元素的样式值setCss

设置元素的样式值setCss

作者: gaoqizhuhui | 来源:发表于2017-08-14 15:56 被阅读0次

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

相关文章

  • 设置元素的样式值setCss

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

  • 第七周第五天笔记之DOM库

    1 DOM库创建 setCss方法目的:设置元素身上的单一的行间样式参数:ele:元素,attr:属性名,valu...

  • 开发遇到的JS语句集

    设置元素css样式值 改变元素class样式 获取文本框的值 获取元素属性 动态属性值 删除一个父元素下面的所有子...

  • 样式

    集中设置元素属性 TargetType 样式 类似 css对属性值分组,在多个元素中共享该组的值效果 样式继承 本...

  • web前端 -- Day18 js基础

    设置元素的样式方式 对象.style.属性=值; 对象.ClassName=值; 对象.style="属性:值”;...

  • 动态修改before/after的content值

    样式中设置content为元素的data-值 然后js修改

  • CSS文本、字体、颜色

    文本样式 文本常用的样式 文本缩进:text-indent 设置段落元素的第一行缩进方式,属性值可为绝对值(px)...

  • web前端入门到实战:css中border-style 属性

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none...

  • js滚动条

    实现原理:改变元素样式属性的top值 1.给需要滚动的元素设置定位 2.通过鼠标移动事件为需要滚动的元素设置top...

  • js设置html元素的样式

    设置某个元素的样式 去除使用js设置的样式

网友评论

      本文标题:设置元素的样式值setCss

      本文链接:https://www.haomeiwen.com/subject/oyofrxtx.html