巧用cssText属性批量操作样式

2

3

4

var head= document.getElementById("head");

head.style.width = "200px";

head.style.height = "70px";

head.style.display = "block";

2

3

4

5

6

7

function setStyle(obj,css){

  for(var atr in css){

    obj.style[atr] = css[atr];

  }

}

var head= document.getElementById("head");

setStyle(head,{width:"200px",height:"70px",display:"block"})

2

var head= document.getElementById("head");

head.style.cssText="width:200px;height:70px;display:bolck";

<div style="color:red;">TEST</div>

div.style.cssText = "width:200px;";

2

3

4

function setStyle(el, strCss){

    var sty = el.style;

    sty.cssText = sty.cssText + strCss;

}

2

3

4

5

6

7

8

9

10

11

12

function setStyle(el, strCss){

    function endsWith(str, suffix) {

        var l = str.length - suffix.length;

        return l >= 0 && str.indexOf(suffix, l) == l;

    }

    var sty = el.style,

        cssText = sty.cssText;

    if(!endsWith(cssText, ‘;‘)){

        cssText += ‘;‘;

    }

    sty.cssText = cssText + strCss;

}