Cleverly use cssText attribute to batch operate styles in js

Cleverly use cssText attribute to batch operate styles in js_javascript skills

WBOY

Release： 2016-05-16 18:09:35

Original

1643 people have browsed it

Set css attributes for an HTML element, such as

Copy code The code is as follows:

 
var head= document.getElementById("head"); 
head.style.width = "200px"; 
head.style.height = "70px"; 
head.style.display = "block"; 

This is too verbose to write. To make it easier, write a tool function, such as

Copy code Code As follows:

 
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"}) 

Discovered that the cssText attribute is used in Google API, and the test passed in all browsers. It only takes one line of code, which is really cool. For example,

Copy code The code is as follows:

 
var head= document.getElementById("head") ; 
head.style.cssText="width:200px;height:70px;display:bolck"; 

Like innerHTML, cssText is fast and supported by all browsers. In addition, when operating styles in batches, cssText only needs to be reflowed once, which improves page rendering performance.

But cssText also has a disadvantage, it will overwrite the previous style. For example,

Copy code The code is as follows:

TEST

I want to add a css attribute width to this div

Copy code The code is as follows:

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

Although the width is applied at this time, the previous color is overwritten. Lost. Therefore, when using cssText, you should use overlay to retain the original style.

Copy code The code is as follows:

 
function setStyle(el, strCss){ 
var sty = el.style; 
sty.cssText = sty.cssText strCss; 
} 

Using this method has no problem in IE9/Firefox/Safari/Chrome/Opera, but due to The missing semicolon in the cssText return value in IE6/7/8 will disappoint you.

Therefore, IE6/7/8 needs to be processed separately. If the cssText return value does not have ";", then add

Copy code The code is as follows:

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