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

Thuộc tính window.outerHeight trong HTML

Thuộc tính window.outerHeight trả về chiều cao toàn bộ cửa sổ trình duyệt (kể cả thanh địa chỉ, tab, bookmark bar, thanh cuộn ngang, viền) tính bằng pixel.

Cú pháp

window.outerHeight

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>Demo window.outerHeight</h1>
<button onclick="showOuterHeight()" class="btn">Xem chiều cao cửa sổ</button>
<div class="show"></div>
<script>
  function showOuterHeight() {
    document.querySelector('.show').innerHTML = 'Chiều cao cửa sổ (outerHeight): ' + window.outerHeight + 'px';
  }
</script>
</body>
</html>

Kết quả

Nhấn nút → hiển thị chiều cao toàn bộ cửa sổ browser.

So sánh: innerHeight = chiều cao viewport (nội dung). Hữu ích cho responsive design, tính toán layout, detect fullscreen mode.