Thuộc tính style.overflow trong HTML DOM trả về và cho phép thay đổi thuộc tính CSS overflow của một phần tử trong tài liệu HTML. Đây là shorthand cho overflowX và overflowY.
Cú pháp
Lấy giá trị overflow
object.style.overflow
Thay đổi overflow
object.style.overflow = "value"
Các giá trị
Giá trị có thể là:
| Giá trị | Mô tả |
|---|---|
| scroll | Cắt nội dung và thêm thanh cuộn khi cần thiết. |
| inherit | Kế thừa giá trị từ phần tử cha. |
| initial | Đặt về giá trị mặc định. |
| auto | Tự động cắt nội dung và thêm thanh cuộn khi cần. |
| hidden | Ẩn nội dung tràn ra ngoài hộp phần tử. |
| visible | Không cắt nội dung, cho phép tràn ra ngoài hộp phần tử. |
Ví dụ
Ví dụ sử dụng thuộc tính style.overflow:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; background: lightblue; height: 100vh; }
p { border: 2px solid #fff; margin: 1.5rem auto; height: 100px; overflow: scroll; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style overflow DOM</h1>
<p>Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. </p>
<button onclick="add()" class="btn">Thay đổi overflow</button>
<script>
function add() {
document.querySelector('p').style.overflow = "hidden";
}
</script>
</body>
</html>
Kết quả
Nhấn nút Thay đổi overflow để thay đổi giá trị thuộc tính CSS overflow từ scroll sang hidden.