Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính tràn kiểu HTML DOM


Thuộc tính tràn kiểu DOM trả về và sửa đổi thuộc tính CSS tràn của một phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

  • Trả lại phần bổ sung

object.style.overflow
  • Sửa đổi phần tràn

object.style.overflow = “value”

Giá trị

Giá trị ở đây có thể là -

Giá trị Giải thích
cuộn Nó cắt nội dung và các thanh cuộn được thêm vào khi cần thiết.
kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
tên đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định.
tự động Nó cắt nội dung và thêm thanh cuộn khi cần thiết.
ẩn Nó ẩn luồng nội dung bên ngoài hộp phần tử.
hiển thị Nó không cắt nội dung và nội dung sẽ chảy ra bên ngoài hộp phần tử.

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính kiểu tràn -

<!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>DOM Style overflow Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change overflow</button>
<script>
   function add() {
      document.querySelector('p').style.overflow = "hidden";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính tràn kiểu HTML DOM

Nhấp vào “ Thay đổi phần bổ sung ”Để thay đổi giá trị của thuộc tính CSS tràn từ cuộn thành ẩn .

Thuộc tính tràn kiểu HTML DOM