HOME › học javascript - lập trình javascript cơ bản>>16. javascript và broswer

Lấy kích thước màn hình bằng JavaScript (innerWidth, outerWidth, clientWidth, clientHeight)

27 tháng 6 ,2022

Bài viết đăng tại: https://laptrinhcanban.com

Hướng dẫn cách lấy kích thước màn hình bằng JavaScript. Bạn sẽ biết cách sử dụng các thuộc tính như innerWidth, outerWidth, clientWidth, clientHeight để lấy chiều rộng và chiều cao của màn hình bằng JavaScript sau bài học này.

Có 2 cách lấy kích thước màn hình bằng JavaScript như sau:

Lấy kích thước toàn bộ màn hình
Lấy kích thước màn hình ngoại trừ thanh scroll bar

Lấy kích thước toàn bộ màn hình bằng JavaScript

Để lấy kích thước toàn bộ màn hình bằng JavaScript bao gồm chiều rộng và chiều cao của màn hình hiện tại, chúng ta sử dụng một trong 4 thuộc tính sau của window Object sau đây:

window.outerWidth: Chiều rộng trình duyệt
window.outerHeight: Chiều cao của trình duyệt
window.innerWidth: Chiều rộng của vùng hiển thị nội dung
window.innerHeight: Chiều cao của vùng hiển thị nội dung

Trong đó phần hiển thị của các thuộc tính như ảnh sau đây:

Lưu ý là kết quả của 2 thuộc tính window.innerWidth và window.innerHeight sẽ bao gồm cả phần diện tích của thanh scroll bar nếu có trên màn hình. Trong trường hợp không muốn lấy phần diện tích này, hãy dùng các thuộc tính ở phần sau để thay thế.

Sau đây là ví dụ cụ thể về cách dùng các thuộc tinh trên để lấy kích thước toàn bộ màn hình bằng JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Kích thước màn hình</h1>

<input type="button" value="click" id="btn">

<p>Thông tin chiều rộng và chiều cao của màn hình</p>

<ul>
<li>window.outerWidth: Chiều rộng trình duyệt</li>
<li>window.outerHeight: Chiều cao của trình duyệt </li>
<li>window.innerWidth:   hiều rộng của vùng hiển thị nội dung</li>
<li>window.innerHeight:  Chiều cao của vùng hiển thị nội dung</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('outerWitdh :' + window.outerWidth);
    console.log('outerHeight:' + window.outerHeight);
    console.log('innerWidth: ' + window.innerWidth);
    console.log('innerHeight:' + window.innerHeight);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút click thì các giá trị kích thước của màn hình trình duyệt sẽ được lấy và in ra màn hình console như sau:

Lấy kích thước màn hình trừ phần scroll bar bằng JavaScript

Trong trường hợp sử dụng thuộc tính window.innerWidth và window.innerHeight để lấy kích thước màn hình, kết quả trả về sẽ bao gồm cả phần diện tích của thanh scroll bar nếu có trên màn hình. Trong trường hợp không muốn lấy phần diện tích này, hãy dùng các thuộc tính sau đây:

document.documentElement.clientWidth: Chiều rộng trình duyệt (không bao gồm scroll bar)
document.documentElement.clientHeight: Chiều cao của trình duyệt (không bao gồm scroll bar)

Hai thuộc tính trên sẽ trả về kết quả là kích thước bên trong của màn hình, mà không bao gồm diện tích của thanh scroll bar nếu có.

Sau đây là ví dụ cụ thể về cách dùng các thuộc tinh trên để lấy kích thước màn hình không bao gồm diện tích của thanh scroll bar bằng JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Kích thước màn hình</h1>

<input type="button" value="click" id="btn">

<p>Thông tin chiều rộng và chiều cao của màn hình</p>

<ul>
<li>window.outerWidth: Chiều rộng trình duyệt</li>
<li>window.outerHeight: Chiều cao của trình duyệt </li>
<li>document.documentElement.clientWidth:   Chiều rộng trình duyệt không gồm scroll bar</li>
<li>document.documentElement.clientHeight:  Chiều cao của trình duyệt không gồm scroll bar</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('outerWitdh :' + window.outerWidth);
    console.log('outerHeight:' + window.outerHeight);
    console.log('clientWidth: ' + document.documentElement.clientWidth);
    console.log('clientHeight:' + document.documentElement.clientHeight);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút click thì các giá trị kích thước của màn hình trình duyệt trong trường hợp có và không bao gồm scroll bar sẽ được lấy và in ra màn hình console như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách lấy kích thước màn hình bằng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.