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.