Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thiết lập kiểu hiển thị (display type) của phần tử với JavaScript

Thuộc tính display kiểm soát kiểu hộp (box type) của phần tử: block, inline, flex, grid, none, v.v. Dùng none để ẩn hoàn toàn (không chiếm không gian).

Ví dụ minh họa

Nhấn nút để ẩn hộp xanh lá (display: none):

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      width: 250px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>
<body>
  <button onclick="display()">Đặt display = none</button>
  <div id="myID">
    <h1>Tiêu đề cấp 1 Demo</h1>
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.display = "none";
    }
  </script>
</body>
</html>

Các giá trị display phổ biến

Giá trịMô tả
blockKhối, chiếm toàn bộ chiều ngang, xuống dòng mới
inlineĐúng dòng, không đặt width/height được
inline-blockĐúng dòng nhưng đặt width/height được
flexFlex container
gridGrid container
noneẨn hoàn toàn, không chiếm diện tích
contentsPhần tử biến mất, chỉ con cái tham gia layout