Thuộc tính availHeight của Screen trong HTML

Thuộc tính availHeight của Screen trong HTML trả về chiều cao có sẵn của màn hình người dùng, nghĩa là nó loại trừ các tính năng giao diện của trình duyệt.

Cú pháp

Cú pháp như sau:

screen.availHeight

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính availHeight của Screen:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 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;
    margin: 1rem auto;
    font-weight: bold;
    font-family: sans-serif;
  }
</style>
<body>
<h1>Thuộc tính screen.availHeight trong HTML</h1>
<button class="btn" onclick="get()">Hiển thị giá trị availHeight</button>
<div class="show"></div>
<script>
  function get() {
    document.querySelector(".show").innerHTML = "Chiều cao có sẵn là " + screen.availHeight + " px";
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "Hiển thị giá trị availHeight" để hiển thị giá trị của thuộc tính availHeight: