Đặt chiều rộng hoặc chiều cao của phần tử trong Chế độ tiêu chuẩn

123

Có thể đặt chiều rộng hoặc chiều cao của phần tử HTML (ví dụ <div>) trong JavaScript ở Chế độ tiêu chuẩn không?

Lưu ý mã sau:

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

Khi người dùng nhấn nút thay đổi chiều rộng , <div>chiều rộng sẽ thay đổi.

Nó hoạt động tốt khi khai báo doctype xác định Chế độ Quirks. Trong Chế độ tiêu chuẩn, tôi không thể thay đổi kích thước của phần tử theo cách này

Có thể thao tác kích thước của một phần tử trong Chế độ tiêu chuẩn không? Làm thế nào để bỏ qua sự bất ổn này?

— rafalry
nguồn

191

Hãy thử khai báo đơn vị chiều rộng:

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

— Alexandre Perez
nguồn

1

Ahaha .. ý tôi là "meo" (c). Tôi đã dành khoảng một giờ, cố gắng tìm hiểu tại sao phong cách không được áp dụng. Cảm ơn!

— Vitalii Vasylenko

1

Điều đáng nói là chiều rộng không bao gồm lề và khi nào box-sizing: border-box;, chiều rộng sẽ bao gồm các đường viền, ngược lại chiều rộng không bao gồm các đường viền.

— Qian Chen

39

Các stylebất động sản cho phép bạn chỉ định giá trị cho các thuộc tính CSS.

widthThuộc tính CSS lấy chiều dài làm giá trị của nó.

Độ dài yêu cầu đơn vị. Trong chế độ quirks, trình duyệt có xu hướng giả định pixel nếu được cung cấp một số nguyên thay vì độ dài. Chỉ định đơn vị.

e1.style.width = "400px";

— Quentin
nguồn