Thuộc tính thay đổi kích thước CSS
Ví dụ
Tại đây, người dùng có thể thay đổi kích thước cả chiều cao và chiều rộng của phần tử <div>:
div {
resize: both;
overflow: auto;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính resize
xác định xem (và làm thế nào) một phần tử có thể thay đổi kích thước bởi người dùng.
Lưu ý: Thuộc tính resize
không áp dụng cho các phần tử nội tuyến hoặc chặn các phần tử có tràn = "hiển thị". Vì vậy, hãy đảm bảo rằng phần tràn được đặt thành "cuộn", "tự động" hoặc "ẩn".
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.resize="cả hai" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Cú pháp CSS
resize: none|both|horizontal|vertical|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | Default value. The user cannot resize the element | Play it » |
both | The user can resize both the height and width of the element | Play it » |
horizontal | The user can resize the width of the element | Play it » |
vertical | The user can resize the height of the element | Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Cho phép người dùng chỉ thay đổi kích thước chiều cao của phần tử <div>:
div
{
resize: vertical;
overflow: auto;
}
Hãy tự mình thử »Ví dụ
Cho phép người dùng chỉ thay đổi kích thước chiều rộng của phần tử <div>:
div
{
resize: horizontal;
overflow: auto;
}
Hãy tự mình thử »Ví dụ
Trong nhiều trình duyệt, <textarea> có thể thay đổi kích thước theo mặc định. Ở đây, chúng tôi đã sử dụng thuộc tính thay đổi kích thước để tắt khả năng thay đổi kích thước:
textarea {
resize: none;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Giao diện người dùng CSS
Tham chiếu DOM HTML: thuộc tính thay đổi kích thước