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

Thuộc tính availWidth của Screen trong HTML trả về chiều rộng 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.availWidth

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính availWidth 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.availWidth trong HTML</h1>
<button class="btn" onclick="get()">Hiển thị giá trị availWidth</button>
<div class="show"></div>
<script>
  function get() {
    document.querySelector(".show").innerHTML = "Chiều rộng có sẵn là " + screen.availWidth + " px";
  }
</script>
</body>
</html>

Kết quả

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