使用腳本創建的元素看起來不同

我有div區塊和一組元素與字段集標記分隔。（我已經手動添加它）。還有一個功能是通過腳本添加相似的組（通過點擊按鈕）。似乎，在腳本中，我以相同的方式設置了元素屬性，但它看起來很別緻。（元素之間的距離不相等）。它爲什麼會發生？什麼原因？使用腳本創建的元素看起來不同

我可以通過CSS來糾正這一點，但只有原因很有趣。

整個HTML代碼

<html> 
    <head> 
    <script type="text/javascript"> 

    function addGroup(){ 
    var parent=document.getElementById("myDiv"); 
    var fs=document.createElement("fieldSet"); 
    fs.style.borderRadius="7px"; 
    fs.style.height="45px"; 

    var l=document.createElement("legend"); 
    l.innerHTML="interval_0"; 
    l.style.color="darkgreen"; 
    l.style.fontStyle="italic"; 
    fs.appendChild(l); 

    var d1= document.createElement("input"); 
    d1.type="date"; 
    d1.value='2014-05-01'; 
    fs.appendChild(d1); 

    var d2= document.createElement("input"); 
    d2.type="date"; 
    d2.value='2014-05-22'; 
    fs.appendChild(d2); 

    var txt= document.createElement("input"); 
    txt.type="text"; 
    txt.value='0'; 
    txt.size=12; 
    txt.style.textAlign="right"; 
    fs.appendChild(txt); 

    parent.appendChild(fs); 
} 

    </script> 
    </head> 
    <body> 
     <input type="hidden" id="hd1" value="0"> </input> 
     <button onclick="addGroup();"> AddGroup</button> 
     <div id="myDiv" style="padding:7px;position:relative;margin-  top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;"> 

     <fieldset style="border-radius:7px;height:45px;"><legend style="color:darkgreen;font-style:italic;">Interval</legend> 
     <input type="date" value="2014-01-01"> <input type="date" value="2014-01-31"> <input type="text" size="12" value="0" style="text-align:right;"></input> 
     </fieldset> 
     </div> 
     </body> 
     </html>

來源

2014-07-01 GGSoft

你爲什麼要設置CSS屬性，而不僅僅是使用普通的類？ – epascarello

由於空白而間距不同嗎？ – epascarello

但我不使用空格。 – GGSoft

元素之間的空間不同。當您使用空格字符（空格，製表符或行結尾）編寫HTML時，它將打印在元素之間並在輸入之間創建邊距。

但是，當你創建元素並用javascript追加它們時，這些元素之間不會有空白。您可以使用空格創建文本節點（http://www.w3schools.com/jsref/met_document_createtextnode.asp）或省略HTML標記中的空格。

更好的是，創建你的第一個組，調用相同的功能。初始字段集刪除HTML標記，並調用ADDGROUP體的底部（文檔要準備好操縱）

<html> 
<head> 
    <script type="text/javascript"> 

     function addGroup() { 
      var parent = document.getElementById("myDiv"); 
      var fs = document.createElement("fieldSet"); 
      fs.style.borderRadius = "7px"; 
      fs.style.height = "45px"; 

      var l = document.createElement("legend"); 
      l.innerHTML = "interval_0"; 
      l.style.color = "darkgreen"; 
      l.style.fontStyle = "italic"; 
      fs.appendChild(l); 

      var d1 = document.createElement("input"); 
      d1.type = "date"; 
      d1.value = '2014-05-01'; 
      fs.appendChild(d1); 

      var d2 = document.createElement("input"); 
      d2.type = "date"; 
      d2.value = '2014-05-22'; 
      fs.appendChild(d2); 

      var txt = document.createElement("input"); 
      txt.type = "text"; 
      txt.value = '0'; 
      txt.size = 12; 
      txt.style.textAlign = "right"; 
      fs.appendChild(txt); 

      parent.appendChild(fs); 
     } 

    </script> 
</head> 
<body> 
<input type="hidden" id="hd1" value="0"> </input> 
<button onclick="addGroup();"> AddGroup</button> 
<div id="myDiv" style="padding:7px;position:relative;margin-  top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;"> 
</div> 
<script type="text/javascript">addGroup();</script> 
</body> 
</html>

順便說一句，你應該關注使用CSS類。

來源

2014-07-01 13:17:10 CKK

CKK >>謝謝，已經有用 – GGSoft

謝謝，是有用的。抱歉，由於我的名聲不好，我不能投票。 – GGSoft

沒問題，歡迎您，如果它解決您的問題，您可以標記爲正確的答案。 – CKK

通過動態創建的劑量不會得到它們之間的任何空間中的元素，及其在像以下一行代碼動態地添加。

<label>From</label><input type="text" /><label>From</label><input type="text" />

你必須通過保證金來管理CSS的空間。

來源

2014-07-01 13:13:14 amol

使用腳本創建的元素看起來不同

回答

相關問題