如何用JavaScript实现页面元素高亮显示并添加遮罩层提示功能？

本文共计1294个文字，预计阅读时间需要6分钟。

原文：本文字例为大家分享了JavaScript实现页面高亮操作提示和蒙板的整体代码，供大家参考。具体内容如下：

在页面中，有时会遇到操作提示，如下所示图所展示。

可以很直观的告诉用户，关键的提示：

修改后的内容：本例展示了如何使用JavaScript实现页面高亮操作提示和蒙板功能，并提供了相关代码示例。页面中可能出现操作提示，如下所示图示。

直观地提示用户，关键操作如下：

本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码，供大家参考，具体内容如下

在页面上，有时候会遇到操作提示，如下图所示。
可以很直观的告诉用户，关键的操作在哪里，有什么做作用。

需要说明的是，被高亮的部分，并不是目标的真实标签，而是用的其他标签模拟的。
真实的标签被 mask 层盖住了，在下方呢。

标签高亮的部分和操作提示框，都是用 js 动态生成的。

这里关键的知识点：

1、要用 JS 获取目标标签的位置。

el.getBoundingClientRect() 可以获得标签距离窗口的位置。
window.pageXOffset
window.pageYOffset
则是获取页面左，上边滚动出去部分的长度。
利用它们相加，可以得到目标标签在页面中的绝对位置。再把标签放在相同位置就可以。

2、要能动态生成提示标签和遮罩层（一般是半透明的黑色）

3、还要用到 CSS 中的定位。

为了更直接的模拟真实情况，我采用了一些标签来模拟页面的结构。