gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:48 26 4
gpt4 key购买 nike

我有一个 div block 和其中的一组元素,用 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>

最佳答案

动态创建的元素之间没有任何空格,它像下面的代码一样在一行中动态添加。

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

您必须通过 margin 通过 css 管理空间。

关于javascript - 使用脚本创建的元素看起来不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24511004/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com