JavaScript 遮罩层-透明 -- 动态在dom节点上添加

动态在dom节点上添加透明遮罩层
1.获取dom节点距离浏览器上边和左边的距离，即offsetTop和offsetLeft
2.使用offsetWidth，offsetHeight获取dom节点实际的宽和高，即使dom节点的样式中有padding和border
3.使用dom.style.cssText给节点增加样式

<script>
functionsetMask(dom,opacity) {
//        先获取传入节点距离window的距离
var left = dom.offsetLeft;
var top = dom.offsetTop;
var width = dom.offsetWidth;
var height = dom.offsetHeight;
var opacity = opacity ||0.2;
var newElem =document.createElement("div");
newElem.style.cssText="width:200px;height:200px;left:"+left+"px;top:"+top+"px;opacity:"+opacity+";background-color:#fff;"
document.getElementsByTagName('body')[0].appendChild(newElem);
}
var target =document.getElementById('box');
setMask(target,0.3);
</script>

效果图：
底层盒子是粉色的，有一个黑色的边框

无遮罩.jpg

加入白色遮罩

遮罩层.jpg