Ví dụ về thuộc tính resize

Thuộc tính resize

Thuộc tính resize: Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.

HTML viết:

<html>
<head></head>
<body>
<p>Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay
đổi.</p>
</body>
</html>

CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    width: 400px;
}

Hiển thị trình duyệt khi chưa có resize:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Thêm thuộc tính resize, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    resize: both;
    width: 400px;
}

Hiển thị trình duyệt khi có resize:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Ta thấy bên góc phải phía dưới xuất hiện một dạng resize, di chuyển chuột vào vị trí đó, giữ chuột và kéo ta sẽ có thể thay đổi được kích thước cả chiều rộng và chiều ngang.

Thuộc tính resize với giá trị none

Thuộc tính resize với giá trị none: Người dùng không thể thay đổi kích thước, trả về dạng như mặc định.

Thêm thuộc tính resize với giá trị horizontal, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    resize: both;
    resize: none;
    width: 400px;
}

Hiển thị trình duyệt khi có resize với giá trị none:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Khi sử dụng giá trị none, ta đã trả vùng resize về giá trị mặc định (không resize).

Thuộc tính resize với giá trị horizontal

Thuộc tính resize với giá trị horizontal: Người dùng có thể thay đổi thành phần theo chiều thẳng đứng.

Thêm thuộc tính resize với giá trị horizontal, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    resize: horizontal;
    width: 400px;
}

Hiển thị trình duyệt khi có resize với giá trị horizontal:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Ta thấy bên góc phải phía dưới xuất hiện một dạng resize, tuy nhiên lúc này ta chỉ có thể thay đổi kích thước theo chiều thẳng đứng (horizontal).

Thuộc tính resize với giá trị vertical

Thuộc tính resize với giá trị vertical: Người dùng có thể thay đổi thành phần theo chiều ngang.

Thêm thuộc tính resize với giá trị vertical, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    resize: vertical;
    width: 400px;
}

Hiển thị trình duyệt khi có resize với giá trị vertical:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Ta thấy bên góc phải phía dưới xuất hiện một dạng resize, tuy nhiên lúc này ta chỉ có thể thay đổi kích thước theo chiều ngang (vertical).