動態添加的 div 沒有出現
[英]dynamically added div not appearing
問題描述
我正在嘗試將 div 動態添加到頁面。 這是在 Chrome 中。 我查看了幾個說明頁面。 似乎這應該工作，但沒有快樂。 我添加了樣式屬性，使其明顯可見，只是為了開始。 根據“檢查”執行代碼，但沒有出現任何元素。 該元素也不會出現在“檢查/元素/查找”中。
function CreateDragClone(partType) {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);
}
2 個解決方案
解決方案1
1 2021-05-22 19:56:53
使用此代碼，您應該得到一個代表 de borderWidth的小紅點； 您的代碼幾乎完成了，您只是忘記為div元素添加width和height ，另一方面，camelCase 的第一個字母不應該是大寫的。
(function createDragClone() { const cloneContainer = document.createElement("div"); cloneContainer.setAttribute("id", "cloneDiv"); cloneContainer.style.visibility = "visible"; cloneContainer.style.position = "absolute"; cloneContainer.style.borderStyle = "solid"; cloneContainer.style.borderColor = "red"; cloneContainer.style.borderWidth = "1px"; cloneContainer.style.top = "200px"; cloneContainer.style.left = "200px"; cloneContainer.style.width = "200px"; cloneContainer.style.height = "200px"; cloneContainer.style.zIndex = "100000"; document.body.append(cloneContainer); })();
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div></div> </body> </html>
解決方案2
0 已采納 2021-05-22 20:02:20
您需要為創建的元素指定高度和寬度。
還有一件事， partType作為參數傳遞但未被使用，因此您可以將其刪除。
function CreateDragClone() { var cloneContainer = document.createElement("div"); cloneContainer.setAttribute("id", "cloneDiv"); //cloneContainer.setAttribute("class", "closeContainer"); cloneContainer.style.visibility = "visible"; cloneContainer.style.position = "absolute"; cloneContainer.style.borderStyle = "solid"; cloneContainer.style.borderColor = "red"; cloneContainer.style.borderWidth = "1px"; cloneContainer.style.top = "200px"; cloneContainer.style.left = "200px"; cloneContainer.style.zIndex = "100000"; cloneContainer.style.width = "100px"; cloneContainer.style.height = "100px"; document.body.append(cloneContainer); } CreateDragClone();
動態添加的div不可拖動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.