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

Thuộc tính bên trong cửa sổ HTML

Thuộc tính HTML Window innerHeight trả về chiều cao của vùng nội dung của cửa sổ trong tài liệu HTML.

Cú pháp

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

window.innerHeight

Hãy để chúng tôi xem một ví dụ về Thuộc tính bên trong cửa sổ HTML -

Ví dụ

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>HTML Window innerHeight Property</h1>
<button onclick="display()" class="btn">Show window inner height</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Window inner height is: ' + window.innerHeight + "px";
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính bên trong cửa sổ HTML

Nhấp vào nút “Hiển thị chiều cao bên trong cửa sổ” để hiển thị chiều cao bên trong của vùng nội dung:

Thuộc tính bên trong cửa sổ HTML