說明： 使用 ele.outerHTML = '' 這樣的方法可以很容易的清除一個元素。 當然也可以使用parent.removeChild() ，但是相較而言，還是使用 outerHTML = '' 更容易、便捷一些。
如何使一個div能夠鋪滿整個頁面？
第一步：提出問題
最近在做項目，希望實現這樣一個效果： 在首頁的右下角fix一個搜索圖片，點擊這個搜索圖片，就會彈出一個類似模態框的div，這個div會占領整個頁面的位置。
第二步：使用demo測試
下面我們就利用一個簡單的demo測試。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { background-color: #abc; color: white; font-size: 35px; text-align: center; } </style> </head> <body> <div class="fullpage"> 這是一段文字 </div> </body> </html>
效果如下所示：
這是最簡單的一種方式。
如果我們希望當點擊某一個按鈕時， 這個模態框出現， 將其他內容全部覆蓋呢？ 並且其下面的內容不可滾動....應該怎么做呢？
首先看下面的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #abc; color: white; font-size: 35px; text-align: center; } button { position: fixed; bottom: 50px; right: 50px; background-color: red; } </style> </head> <body> <div class="content"> 快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/>快樂<br/> </div> <button>click to fullpage</button> <div class="fullpage"> 文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/> </div> <script> document.querySelector("button").onclick = function() { document.querySelector(".fullpage").style.display = "block"; } </script> </body> </html>
這里我利用將這個div的position: fixed； top: 0; bottom: 0; left: 0; right: 0;可以將這個div占滿整個屏幕。
第三步： 運用到項目中
更好的做法是下面這樣的:
var model = document.createElement("div"); model.style.cssText = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model);
即點擊某個按鈕之后直接創建一個div，然后利用cssText來填充。
注意： 因為這里直接添加到了 body 上，所以使用absolute和使用fixed得到的結果是類似的。
如下：
state.ifShowCart = !state.ifShowCart; if (state.ifShowCart == true) { var model = document.createElement("div"); model.id = "Model"; model.style.cssText = "position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model); } else { document.getElementById("Model").outerHTML = ""; }
即清空outerHTML即可將該元素去除。