标签：
今天抽空折腾了一个遮罩层，遇到一个问题，就是设置style，看下面：
一般我们要设置比较少的style通常会这样：
element.style.height = "50px"; element.style.width = "200px";
Ok，通常style较少这样用没问题，但如果遇到要设置的比较多，还这样做？很显然不会，我是这样做的：
element.style ="display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#F00";
我承认我没有测试，立马就把写的mask分享给朋友，结果被朋友提醒style不能直接赋值，我测试了一下，在火狐 欧朋里都没有问题，但在谷歌IE里赋值不成功，急忙找了下资料，
原来element.style是只读属性，不能直接赋值（但可以给子属性赋值，例如element.style.width）。
那该怎么办?此处讲解两种方法：
1. cssText 特性必须返回序列化的CSS规则
我们可以这样用
element.style.cssText ="display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#F00";
(注：如果元素style属性已经存在其它值，cssText设置时会首先把原有的清除，然后再赋值)
2. for in
var setStyle = function(element,styles){ for( var i in styles ){ element.style[i] = styles[i]; } }
使用：
setStyle(element,{width : ‘200px‘; position : ‘absolute‘; left : ‘100px‘;})
最后奉上mask
var oMask = null; var mask = function(backgroundColor,transparency,zindex) { /* *backgroundColor为背景色(默认#000) transparency为透明度(默认0.5 可选0.1-0.9) zindex层级(默认9999) * */ var _backgroundColor = backgroundColor ? (backgroundColor > 0 ? "#000" : backgroundColor) : "#000"; var _transparency = transparency ? (transparency > 0 && transparency < 1 ? transparency : (backgroundColor > 0 ? backgroundColor : 0.5) ) : (backgroundColor > 0 && backgroundColor < 1 ? backgroundColor : 0.5 ); var _zindex = zindex ? (backgroundColor >= 1 ? backgroundColor : transparency) : 9999; var setStyle = function(){ (oMask || createDiv).style.cssText = "display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:"+_backgroundColor+";opacity:"+_transparency+";filter:Alpha(opacity="+_transparency*100+");z-index:"+_zindex+";"; } if(oMask){setStyle();return oMask;} var createDiv = document.createElement("div"); setStyle(); document.body.appendChild( oMask = createDiv ); return oMask; }
标签：
原文地址：http://www.cnblogs.com/yangzonglong/p/4453440.html
