NỘI DUNG BÀI VIẾT
Đôi khi, bạn muốn lấy chiều rộng của màn hình trình duyệt bằng JavaScript.
Trong bài viết này, cùng mình sẽ xem xét cách lấy chiều rộng của màn hình trình duyệt bằng code JavaScript.
Các đối tượng Screen trong JavaScript
– Đối tượng screen chứa đựng các thông tin về màn hình của người dùng.
– Với đối tượng screen, ta có thể xác định được chiều cao, chiều rộng, độ phân giải màu sắc màn hình của người dùng.
– Dưới đây là danh sách các thuộc tính của đối tượng screen.
| Thuộc tính | Mô tả |
|---|---|
| height | Lấy chiều cao màn hình của người dùng |
| width | Lấy chiều rộng màn hình của người dùng |
| availHeight | Lấy chiều cao màn của người dùng (không bao gồm thanh Taskbar nằm ngang) |
| availWidth | Lấy chiều rộng màn hình của người dùng (không bao gồm thanh Taskbar nằm dọc) |
| colorDepth | Lấy độ phân giải màu sắc màn hình của người dùng |
1) Lấy chiều cao của màn hình
– Để lấy chiều cao màn hình của người dùng, ta truy cập vào thuộc tính height của đối tượng screen.
Ví dụ:
Lấy chiều cao màn hình của người dùng
<script>
var x = screen.height;
</script>Code language: HTML, XML (xml)Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:
10802) Lấy chiều rộng của màn hình
– Để lấy chiều rộng màn hình của người dùng, ta truy cập vào thuộc tính width của đối tượng screen.
Ví dụ:
Lấy chiều rộng màn của người dùng
<script>
var x = screen.width;
</script>Code language: HTML, XML (xml)Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:
19203) Lấy chiều cao của màn hình (không gồm Taskbar)
– Để lấy chiều cao màn hình (không bao gồm thanh Taskbar nằm ngang) của người dùng, ta truy cập vào thuộc tính availHeight của đối tượng screen.
Ví dụ:
Lấy chiều cao màn hình (không bao gồm thanh Taskbar nằm ngang) của người dùng
<script>
var x = screen.availHeight;
</script>Code language: HTML, XML (xml)Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:
10404) Lấy chiều rộng của màn hình (không gồm Taskbar)
– Để lấy chiều rộng màn hình (không bao gồm thanh Taskbar nằm dọc) của người dùng, ta truy cập vào thuộc tính availWidth của đối tượng screen.
Ví dụ:
Lấy chiều rộng màn hình (không bao gồm thanh Taskbar nằm dọc) của người dùng
<script>
var x = screen.availWidth;
</script>Code language: HTML, XML (xml)Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:
19205) Lấy độ phân giải màu sắc
– Để lấy độ phân giải màu sắc (số bit cho một điểm ảnh) màn hình của người dùng, ta truy cập vào thuộc tính colorDepth của đối tượng screen.
Ví dụ:
Lấy độ phân giải màu sắc màn hình của người dùng
<script>
var x = screen.colorDepth;
</script>Code language: HTML, XML (xml)Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:
24Sử dụng thuộc tính của document.body hoặc document.documentElement để lấy chiều rộng của màn hình trình duyệt bằng JavaScript
Đây document.body là phiên bản JavaScript của phần tử nội dung HTML.
Đây document.documentElement là phiên bản JavaScript của html phần tử HTML.
Nó có các thuộc tính mà bạn cần để lấy chiều rộng của màn hình trình duyệt.
Ví dụ, bạn có thể viết:
const getWidth = () => {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
console.log(getWidth())Code language: JavaScript (javascript)Để tạo một hàm để lấy chiều rộng của màn hình của trình duyệt.
document.body.scrollWidth là chiều rộng đầy đủ của nội dung của phần tử body.
document.documentElement.scrollWidth là chiều rộng đầy đủ của nội dung của phần tử html.
document.body.offsetWidth là chiều rộng của body, phần tử t bao gồm mọi đường viền, khoảng đệm và thanh cuộn dọc.
document.documentElement.offsetWidth là chiều rộng của html, phần tử t. bao gồm mọi đường viền, khoảng đệm và thanh cuộn dọc.
document.documentElement.clientWidth là chiều rộng bên trong của một phần tử tính bằng pixel. Nó bao gồm phần đệm nhưng không bao gồm đường viền, lề và thanh cuộn dọc của phần tử html.
Mỗi người trong số họ đều tính bằng pixel.
Do đó, bạn có thể sử dụng phương pháp Math.max này để lấy giá trị lớn nhất giữa mỗi giá trị trong số chúng.
Hàm sẽ trả về một số có giá trị lớn nhất giữa tất cả các giá trị đó.
Kết luận
Chúng ta có thể sử dụng các thuộc tính khác nhau của document.body hoặc document.documentElement để lấy chiều rộng của màn hình trình duyệt bằng javascript.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
