在頁面上，有時候會遇到操作提示，如下圖所示。
可以很直觀的告訴用戶，關鍵的操作在哪里，有什么做作用。

需要說明的是，被高亮的部分，并不是目標的真實標簽，而是用的其他標簽模擬的。
真實的標簽被 mask 層蓋住了，在下方呢。

標簽高亮的部分和操作提示框，都是用 js 動態生成的。

這里關鍵的知識點：

要用 JS 獲取目標標簽的位置。
el.getBoundingClientRect() 可以獲得標簽距離窗口的位置。
window.pageXOffset
window.pageYOffset
則是獲取頁面左，上邊滾動出去部分的長度。
利用它們相加，可以得到目標標簽在頁面中的絕對位置。再把【高亮】標簽放在相同位置就可以。

要能動態生成提示標簽和遮罩層（一般是半透明的黑色）

還要用到 CSS 中的定位。

為了更直接的模擬真實情況，我采用了一些標簽來模擬頁面的結構。
HTML 代碼如下：

<!-- 模擬頭部 --> <header class="header">模擬頭部 </header> <!-- 模擬頭部 end --> <!-- 模擬導航 --> <nav class="mainNav">模擬導航 </nav> <!-- 模擬導航 end --><!-- 主體部分 --> <main class="pageMain"><ul class="sidebar"><li id="step1"><a href="#">操作第一步</a></li><li><a href="#">操作第二步</a></li><li><a href="#">操作第三步</a></li></ul><div class="other">模擬其他部分</div> </main> <!-- 主體部分 end -->

基本樣式如下：

.posa{position: absolute; } .header{height: 200px;width: 1200px;margin-left: auto;margin-right: auto;background: #eee; } .mainNav{height: 80px;width: 1200px;margin-left: auto;margin-right: auto;background: #5f5fd7; } .pageMain{width: 1200px;margin-left: auto;margin-right: auto;background: #eee; } .sidebar{width: 200px;line-height: 50px;text-align: center;background: #fff;border:1px #666 solid;border-bottom:none; } .sidebar a{display: block;border-bottom:1px #666 solid;color: #333; }.other{height: 700px;background: #708af5;font-size: 30px;color: #fff; }.mask{position: fixed;top:0;right:0;bottom: 0;left:0;background: rgba(0, 0, 0, 0.48); }.tips{background: #fff;position: absolute;line-height: 50px;color: #333;display: block;text-align: center; }.tipsc_content{margin-left: 200px;padding-top: 100px;margin-right: 80px; } .tipsc_btn{padding-top: 30px; }.tipsc_btn button{outline:none;width: 100px;height: 40px;background: #09a366;color: #fff;border:none;cursor: pointer; }

JavaScript 代碼如下：

// 獲取目標標簽 let step1 = document.getElementById("step1"); let body = document.getElementsByTagName("body")[0];let tips = null,mask = null,tipsContent= null; // 創建標簽。默認生成 mask 標簽 let makeElement = function({id="mask",classN="mask",content = ""}={}){let eId = document.getElementById(id);if( !eId ){ // 判斷 mask 是否存在eId = document.createElement("div");eId.id = id;eId.className =classN;eId.innerHTML = content;body.appendChild( eId );return eId ;}else{return eId; // mask 已經存在，不需要再創建。} }; // 去掉遮罩層 let removeTag = function(tag){tag.parentNode.removeChild( tag ); };// 獲取要提示的內容的位置。這里是 li#step1 let getPostion = function(tag){let x = tag.getBoundingClientRect().x ;let y = tag.getBoundingClientRect().y ;return {x:x,y:y}; }; // 設置tips的位置 let setPosition = function(tips, {x="0",y="0",w="0",h="0"}={}){tips.style.left = x + "px" ;tips.style.top = y+ "px" ;tips.style.width = w+ "px"tips.style.height = h + "px"console.info(tagP.x , tagP.y ); }; // 獲取要提示的內容的標簽位置 let tagP = getPostion(step1); // 生成 mask mask = makeElement(); // 生成目標標簽的高亮框 tips = makeElement({id:"tips",classN:"tips",content :"操作第一步" // 偽裝原標簽的內容 }); setPosition(tips, {x:tagP.x + window.pageXOffset,y:tagP.y + window.pageYOffset,w:step1.offsetWidth ,h:step1.offsetHeight });// 生成提示內容框 tipsContent = makeElement({id:"tipsContent",classN:"tipsContent posa",content :`<div style="width: 490px; height: 300px;background:url('images/op_tips.png') no-repeat;"><div class="tipsc_content">根據項目內容調整樣式<div class="tipsc_btn"><button type="button" id="okBtn">確定</button></div></div></div>` }); setPosition(tipsContent, {x:tagP.x + window.pageXOffset+200,y:tagP.y + window.pageYOffset-100,w:490,h:300 });// 點擊“確定”按鈕 let okBtn = document.getElementById("okBtn"); okBtn.addEventListener("click",function(){removeTag(mask);removeTag(tips);removeTag(tipsContent); });// 當窗口調整大小時候，調整 tips 位置。 window.addEventListener("resize",function(){tagP = getPostion(step1);setPosition(tips,tagP); });

簡單進行了下函數封裝，但是還是覺得代碼寫的不夠完美。比如用JS生成了樣式，其實可以把一些樣式封裝在CSS 中。

總結

以上是生活随笔為你收集整理的JavaScript 练手小技巧：页面高亮操作提示和蒙板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。