为什么用javascript创建文本框时会显示不同的文本框？_Javascript_Html_Css

为什么用javascript创建文本框时会显示不同的文本框？

javascript html css

为什么用javascript创建文本框时会显示不同的文本框？,javascript,html,css,Javascript,Html,Css,为什么在此代码中，当我按下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/ja

为什么在此代码中，当我按下

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>


函数测试（）{
var txt=document.createElement（'input'）；
txt.type='text'；
txt.style=“宽度：30px；填充：2px；边框：1px纯黑”；
document.getElementById（'bd'）.appendChild（txt）；
}

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

样式

属性不是字符串。它是一个对象，其中每个CSS属性都表示为DOM属性
它还包括所有规则
txt.style.cssText = "width: 30px; padding: 2px; border: 1px solid black";

对于以编程方式创建的文本框，设置txt.type='input'
，但在原始版本中，您设置了type=“text”
。更改txt.type='input'
totxt.type='text'
如果要在一个字符串中设置样式
，请使用txt.style.cssText=

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

通过className属性动态操作类确实是最佳实践，因为所有样式挂钩的最终外观都可以在单个样式表中控制。一个人的JavaScript代码也变得更干净，因为它不再专注于样式化细节（MDN）
cssText返回样式规则的实际文本。能够动态设置样式表规则
 txt.cssText = style here;

. 这就是全部密码吗？您使用的浏览器（版本）是什么？@Bergi:这是确切的代码。使用chrometxt.type='input'应该是文本
<代码>输入
仅起作用，因为它是无效值，因此控件使用默认值（即文本
）。@Quentin:Updated OP.Sameproblem@Cratylus-在做出我在回答中提到的更改后，对我来说效果很好：访问时返回什么并不重要。您仍然可以为它分配一个完整的CSS属性字符串，它将被解析。@Bergi-规则不会被应用（至少不会在我刚刚在Chrome中执行的测试中）。哎呀，这似乎只在Opera中起作用，根据…