標準モードで要素の幅または高さを設定する

123

<div>標準モードのJavaScriptでHTML要素（例）の幅または高さを設定することは可能ですか？

次のコードに注意してください。

<html>
<script language="javascript" type="text/javascript">
    function changeWidth(){
        var e1 = document.getElementById("e1");
        e1.style.width = 400;
    } 
</script>
<body>
    <input type="button" value="change width" onclick="changeWidth()"/>
    <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
</body>
</html>

ユーザーが幅変更ボタンを押すと、<div>の幅が変更されます。

doctype宣言がQuirksモードを決定する場合、正常に機能します。標準モードでは、この方法で要素のサイズを変更できません

標準モードで要素のサイズを操作することはできますか？この機能不全を回避するには？

— 悪党
ソース

191

幅の単位を宣言してみてください：

e1.style.width = "400px"; // width in PIXELS

— アレクサンドルペレス
ソース

1

あはは..「ニャー」を意味します（c）。私は約1時間費やして、スタイルが適用されない理由を理解しようとしました。ありがとう！

— Vitalii Vasylenko 2017年

1

幅にはマージンbox-sizing: border-box;が含まれていないことに言及する価値があります。幅がボーダーを含む場合、幅にボーダーは含まれません。

— Qian Chen

39

このstyleプロパティでは、CSSプロパティの値を指定できます。

CSS widthプロパティは、値として長さを取ります。

長さには単位が必要です。互換モードでは、ブラウザは、長さではなく整数が指定されている場合、ピクセルを想定する傾向があります。単位を指定します。

e1.style.width = "400px";

— クエンティン
ソース