Question

我有div块，其中一组元素用fieldset标记分隔。（我手动添加了它）。并且有一个功能可以通过脚本添加类似的组（按钮单击）。似乎在脚本中，我以相同的方式设置了元素属性，但它看起来不同。（元素之间的距离不相等。）为什么会这样？什么原因？

我可以用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>

Answer 1

动态创建的元素不会在它们之间获得任何空间，它会动态添加到单行中，如下面的代码。

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

您必须通过保证金来管理css空间。

Answer 2

元素之间的空间不同。当您使用空白字符（空格，制表符或行结尾）编写HTML时，它将在元素之间打印并在输入之间创建边距。

但是当你创建元素并用javascript附加它们时，这些元素之间就不会有空格。您可以使用空格（http://www.w3schools.com/jsref/met_document_createtextnode.asp）创建文本节点，或在HTML标记中省略这些空格。

更好的是，通过调用相同的函数创建第一个组。删除初始fieldSet的html标记，并调用body的bodyGroup底部（文档准备好操作）

<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类。

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

2 个答案: