動(dòng)態(tài)在dom節(jié)點(diǎn)上添加透明遮罩層
1.獲取dom節(jié)點(diǎn)距離瀏覽器上邊和左邊的距離，即offsetTop和offsetLeft
2.使用offsetWidth，offsetHeight獲取dom節(jié)點(diǎn)實(shí)際的寬和高，即使dom節(jié)點(diǎn)的樣式中有padding和border
3.使用dom.style.cssText給節(jié)點(diǎn)增加樣式

<script>
functionsetMask(dom,opacity) {
//        先獲取傳入節(jié)點(diǎn)距離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>

效果圖：
底層盒子是粉色的，有一個(gè)黑色的邊框

無(wú)遮罩.jpg

加入白色遮罩

遮罩層.jpg