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

Thuộc tính window.outerWidth trong HTML

Thuộc tính window.outerWidth trả về chiều rộng toàn bộ cửa sổ trình duyệt (kể cả thanh công cụ, thanh cuộn, viền) tính bằng pixel.

Cú pháp

window.outerWidth

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

Kết quả

Nhấn nút → hiển thị chiều rộng toàn bộ cửa sổ browser (kể cả UI).

So sánh: innerWidth = chiều rộng khu vực hiển thị nội dung (viewport), không tính UI browser. outerWidth - innerWidth ≈ độ rộng thanh cuộn dọc + viền.