Atur lebar atau tinggi elemen dalam Mode Standar

123

Apakah mungkin untuk menyetel lebar atau tinggi elemen HTML (mis. <div>) Di JavaScript dalam Mode Standar?

Perhatikan kode berikut ini:

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

Ketika pengguna menekan tombol ubah lebar , <div>lebar harus berubah.

Ini berfungsi dengan baik ketika deklarasi doctype menentukan Mode Quirks. Dalam Mode Standar saya tidak dapat mengubah ukuran elemen dengan cara ini

Apakah mungkin untuk memanipulasi ukuran elemen dalam Mode Standar? Bagaimana cara melewati disfungsionalitas ini?

— rafalry
sumber

191

Coba nyatakan satuan lebar:

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

— Alexandre Perez
sumber

1

Ahaha .. maksudku "meong" (c). Saya telah menghabiskan sekitar satu jam, mencoba mencari tahu mengapa gaya tidak diterapkan. Terima kasih!

— Vitalii Vasylenko

1

Perlu disebutkan bahwa lebar tidak termasuk margin, dan jika box-sizing: border-box;lebar akan menyertakan batas, begitu juga lebar tidak termasuk batas.

— Qian Chen

39

The styleproperti memungkinkan Anda menentukan nilai untuk properti CSS.

widthProperti CSS mengambil panjang sebagai nilainya.

Panjang membutuhkan satuan. Dalam mode quirks, browser cenderung menganggap piksel jika disediakan dengan bilangan bulat, bukan panjang. Tentukan unit.

e1.style.width = "400px";

— Quentin
sumber