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

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

原文示例：本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的整体代码，供大家参考。在页面中，有时会遇到操作提示，如下图所示。可以很直观地告诉用户，关键的提示信息。

改写后：本文以实例展示了如何使用JavaScript实现页面高亮提示和蒙板功能，代码详尽。页面操作提示如示例图所示，直观告知用户关键信息。

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

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

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

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

这里关键的知识点：

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

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

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

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

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