JavaScript实现页面高亮操作提示和蒙板

本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码，供大家参考，具体内容如下在页面上，有时候会遇到操作提示，如下图所示。需要说明的是，被高亮的部分，并不是目标的真实标签，而是用的其他标签模拟的。这里关键的知识点：1、要用 JS 获取目标标签的位置。el.getBoundingClientRect() 可以获得标签距离窗口的位置。为了更直接的模拟真实情况，我采用了一些标签来模拟页面的结构。HTML 代码如下：基本样式如下：JavaScript 代码如下：简单进行了下函数封装，但是还是觉得代码写的不够完美。比如用JS生成了样式，其实可以把一些样式封装在CSS 中。