具有絕對定位的動態添加元素不會與父元素一起流動

Question

我在玩JavaScript。 我在頁面大小調整和動態創建的元素的位置方面遇到問題。 Parent div的位置是相對的，附加的子元素相對於添加它們的父元素而言是絕對的。 當我縮小瀏覽器窗口時，父級可以縮放，但子級的位置不會更新。 在現實世界中，您將如何處理這種情況？ 謝謝PS：請記住，我正在嘗試學習這一點，我確信很多錯誤或不必要的事情。 我也很感謝糾正。

  <html> <head> <!-- <link rel="stylesheet" type="text/css" href="1.css"> --> <script language="javascript"></script> <style> #div1{ postion:relative; margin:auto auto; height:400px; width:400px; background-color: black; } </style> </head> <body> <!-- Goal; --> <!-- I want a js class that will create itself and manage its own properties So when I click on the div I fire up a new object button. --> <div> <label id = "lblID"></label> <div id="div1"></div> </div> <script> document.getElementById("div1").addEventListener("click", createchild, false); function createchild(e) { obj1 = new child(this,e); } function child(el,e) { this.parent = el; this.parentID = el.id; // Create the object this.child = document.createElement('div'); this.parent.appendChild(this.child); // Set some attributes var c = this.parent.childElementCount + 1; this.child.id = "child"+c; // Set some style var l = e.clientX - 20; var t = e.clientY - 20; var stylestring = "position:absolute;top:"+t+"px;left:"+l+"px;height:40px;width:40px;background-color:red;"; this.child.style.cssText = stylestring; // Add some eventhandling this.child.addEventListener("click",getchildcoords,false); } function getchildcoords(e) { alert(this.id); e.stopPropagation(); } </script> </body> </html>

Answer 1

＃div1 CSS的“位置”關鍵字中缺少“ i”
將新div附加到容器本身以鏈接其位置
使用offsetX，offsetY正確放置

 <html> <head> <!-- <link rel="stylesheet" type="text/css" href="1.css"> --> <script language="javascript"></script> <style> #div1{ position:relative; margin:auto auto; height:400px; width:400px; background-color: black; } </style> </head> <body> <!-- Goal; --> <!-- I want a js class that will create itself and manage its own properties So when I click on the div I fire up a new object button. --> <div> <label id = "lblID"></label> <div id="div1"></div> </div> <script> document.getElementById("div1").addEventListener("click", createchild, false); function createchild(e) { obj1 = new child(this,e); } function child(el,e) { this.parent = el; this.parentID = el.id; // Create the object this.child = document.createElement('div'); // Set some attributes var c = this.parent.childElementCount + 1; this.child.id = "child"+c; // Set some style var l = e.offsetX - 20; var t = e.offsetY - 20; var stylestring = "position:absolute;top:"+t+"px;left:"+l+"px;height:40px;width:40px;background-color:red;"; this.child.style.cssText = stylestring; el.appendChild(this.child); // Add some eventhandling this.child.addEventListener("click",getchildcoords,false); } function getchildcoords(e) { alert(this.id); e.stopPropagation(); } </script> </body> </html>

具有絕對定位的動態添加元素不會與父元素一起流動

問題描述

1 個解決方案

解決方案1
0 已采納 2017-02-13 22:23:50

具有絕對定位的動態添加元素不會與父元素一起流動

問題描述

1 個解決方案

解決方案1 0 已采納 2017-02-13 22:23:50

解決方案1
0 已采納 2017-02-13 22:23:50