0

Why in this code the text box that is created when I press push is not exactly the same as the one already displayed? 

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

Update:
What I see in the fiddle of @Bergi:

enter image description here

4

3 に答える 3

6

styleプロパティは文字列ではありません。各 CSS プロパティを DOM プロパティとして表現したオブジェクトです。

また、すべてのルールを含むプロパティもありcssTextます。

txt.style.cssText = "width: 30px; padding: 2px; border: 1px solid black";
于 2013-06-03T20:09:35.637 に答える
1

プログラムで作成されたテキストボックスの場合、 を設定txt.type = 'input';していますが、元の設定ではtype="text". に変更txt.type = 'input';しtxt.type = 'text';ます。

styleを 1 つの文字列に設定する場合は、 を使用しますtxt.style.cssText =。

于 2013-06-03T20:12:08.920 に答える
1 
 txt.style.width ="30px";
 txt.style.padding ="2px";
 tet.style.border ="1px";

すべてのスタイリング フックの最終的な外観を 1 つのスタイルシートで制御できるため、className プロパティを使用してクラスを動的に操作することをお勧めします。スタイリングの詳細に専念する代わりに、JavaScript コードもよりクリーンになります (MDN)

cssText は、スタイル ルールの実際のテキストを返します。スタイルシートのルールを動的に設定できるようにする

 txt.cssText = style here;
于 2013-06-03T20:12:28.903 に答える