使用脚本创建的元素看起来不同

我有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

使用脚本创建的元素看起来不同

回答

相关问题