使用DIV实现全屏遮罩层的方法

"这篇文章主要介绍了如何使用HTML和CSS创建一个简单的DIV遮罩层，并通过JavaScript进行动态调整，实现全屏覆盖的效果。" 在网页设计中，遮罩层（mask layer）通常用于创建一种半透明或者全屏覆盖的效果，用于突出显示特定内容或执行某些操作前的提示。本示例中，通过使用`<div>`元素创建了一个基本的遮罩层，其目的是覆盖整个工作区域。 首先，我们来看HTML部分。HTML代码中包含一个ID为"test"的`<div>`元素，这个`<div>`就是我们的遮罩层。此外，还有两个按钮，分别用于触发不同的函数，改变遮罩层的行为。页面底部有一个高度为1800px的`<p>`元素，用于模拟一个足够大的页面内容，以确保遮罩层可以完全覆盖。 接着，是CSS样式部分。CSS代码设置了`div`元素的绝对定位（`position:absolute`），并将其置于页面的左上角（`top:0; left:0;`）。背景颜色设置为灰色（`background:#ccc;`）。默认情况下，遮罩层没有宽度和高度，因此我们需要通过JavaScript来动态计算并设置这些值。 最后，是JavaScript部分。`test1`函数用于处理按钮点击事件，获取遮罩层元素（`getElementById('test')`），然后调用`getWH`函数来计算页面的宽度和高度。`getWH`函数是一个闭包，它根据浏览器的兼容模式（`compatMode`）返回文档的宽度和高度，包括滚动条的宽度。`test1`函数将这些值应用到遮罩层的CSS样式中，使其适应当前页面的大小。 如果点击第一个按钮（`test1()`），遮罩层会根据页面的可视区域（不包括滚动条）调整大小；点击第二个按钮（`test1(1)`），则会根据整个文档（包括滚动条）的宽度和高度调整遮罩层的大小。 总结来说，这个示例展示了如何使用HTML、CSS和JavaScript创建一个响应式的全屏遮罩层，实现对网页内容的覆盖效果。通过动态调整遮罩层的尺寸，我们可以让它适应不同大小的屏幕和页面内容，从而提供更好的用户体验。