原生JS实现添加简单遮罩层

来源：互联网发布：测声音频率软件编辑：程序博客网时间：2024/05/22 12:58

效果：给页面任一元素添加一个透明遮罩层（透明度可变，且有默认值），兼容IE8+。
这里写图片描述

先呈上简单的不能再简单的页面布局和样式。

<style>body{    margin:0;    padding:50px;}#container{    width:200px;    height:200px;    margin:40px;    background:red;}</style><body><div id="container"></div></body>

2 . 开始正式的JS函数封装

var oDiv=document.getElementById('container');addMask(oDiv);function addMask(ele,opacity){    var opacity=opacity || 0.2; // 默认设为0.2    //获取目标对象元素的边距及宽高    var rect=ele.getBoundingClientRect();     //获取到对象元素的样式来确定遮罩层的位置    var style=getComputedStyle(ele,null);    //创建一个新的div    var oMask=document.createElement('div');     // 开始设置遮罩层的样式    oMask.style.position='absolute';    oMask.style.left=(ele.offsetLeft- parseInt(style.marginLeft) ) + 'px';    oMask.style.top=(ele.offsetTop - parseInt(style.marginTop) ) + 'px';    oMask.style.width=rect.width + parseInt(style.marginLeft) + parseInt(style.marginRight) + 'px';    oMask.style.height=rect.height + parseInt(style.marginTop) + parseInt(style.marginBottom) + 'px';     oMask.style.zIndex=999;    oMask.style.opacity= " " + opacity;    oMask.style.backgroundColor='blue';    ele.parentNode.appendChild(oMask);}

到这，一个简易的遮罩函数就完成了。

解释下上面用到的两个方法：

元素.getBoundingClientRect()

它获取到的是元素各边到页面上边和页面左边的距离，以及元素宽高。
其实就只有right 和 bottom跟一般的CSS有点不同。
图片出错了！

另外，如果和 getClientRects 的使用区别，需百度一下。

getComputedStyle  和  ele.style

getComputedStyle 获取的是元素身上最终起作用的样式，但它只读。
IE9（不含）以下用currentStyle。
而ele.style则只能获取到行间样式，但它即可读又可写。

0 0