为什么使用JavaScript创建文本框时显示的内容不同？

Question

为什么在此代码中，当我按push时创建的文本框与已经显示的文本框不完全相同？

<html>  
<body id="bd">  
<input type="text" style="width: 30px; padding: 2px; border: 1px solid black"/>  
<input type="submit" value="Push" onclick="test()"/>   
<script type="text/javascript">   
function test() {   
    var txt = document.createElement('input');  
    txt.type = 'text';   
    txt.style = "width: 30px; padding: 2px; border: 1px solid black";   
    document.getElementById('bd').appendChild(txt);  
}  
</script>  
</body>  
</html>

更新：
我在@Bergi的小提琴中看到的是：

在此处输入图片说明

Answer 1

style属性不是字符串。 它是一个对象，其中每个CSS属性都表示为DOM属性。

它还具有cssText属性，其中包括所有规则。

txt.style.cssText = "width: 30px; padding: 2px; border: 1px solid black";

Answer 2

对于以编程方式创建的文本框，您要设置txt.type = 'input'; ，但在原始版本中，您设置type="text" 。 更改txt.type = 'input'; 到txt.type = 'text'; 。

如果要在一个字符串中设置style ，请使用txt.style.cssText = 。

Answer 3

 txt.style.width ="30px";
 txt.style.padding ="2px";
 tet.style.border ="1px";

最好的做法是通过className属性动态操作类，因为所有样式钩子的最终外观都可以在一个样式表中控制。 一个人的JavaScript代码也变得更加简洁，因为它不再致力于样式细节（MDN）

cssText返回样式规则的实际文本。 为了能够动态设置样式表规则

 txt.cssText = style here;

为什么使用JavaScript创建文本框时显示的内容不同？

问题描述

3 个解决方案

解决方案1
6 已采纳 2013-06-03 20:09:35

解决方案2
1 2013-06-03 20:12:08

解决方案3
1 2013-06-03 20:12:28

为什么使用JavaScript创建文本框时显示的内容不同？

问题描述

3 个解决方案

解决方案1 6 已采纳 2013-06-03 20:09:35

解决方案2 1 2013-06-03 20:12:08

解决方案3 1 2013-06-03 20:12:28

解决方案1
6 已采纳 2013-06-03 20:09:35

解决方案2
1 2013-06-03 20:12:08

解决方案3
1 2013-06-03 20:12:28