動態(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è)黑色的邊框
無遮罩.jpg
加入白色遮罩
遮罩層.jpg
