Thao tác với Window trong JavaScript

Trong bài hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu về và cách thao tác với đối tượng window trong JavaScript.

Thao tác với Window trong JavaScript

1. Đối tượng window là gì?

Đối tượng window đại diện cho một cửa sổ chứa cả DOM. Một window có thể là cửa main window, là một tập hợp khung hoặc khung riêng lẻ, hoặc thậm chí là một cửa sổ mới được tạo bằng JavaScript.

Nếu bạn nhớ từ các chương trước, chúng ta đã sử dụng phương thức alert() để bật ra cửa sổ thông báo

Đây chính là một phương thức của đối tượng window.

Trong một vài bài hướng dẫn tự học JS tiếp theo, chúng ta sẽ thấy một số phương thức và thuộc tính mới của đối tượng window cho phép chúng ta thực hiện những việc như:

    + Nhắc người dùng nhập thông tin

    + Xác nhận hành động của người dùng

    + Mở cửa sổ mới

    + ... cho phép bạn thêm nhiều tương tác hơn vào các trang web của bạn.

2. Tính toán chiều rộng và chiều cao của window

Đối tượng window cung cấp thuộc tính innerWidth và innerHeight để tìm ra chiều rộng và chiều cao của khung nhìn cửa sổ trình duyệt (tính bằng pixel) bao gồm cả thanh cuộn ngang và dọc, nếu được hiển thị.

Đây là một ví dụ hiển thị kích thước hiện tại của cửa sổ khi click vào nút:

<script>
function windowSize(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Tính kích thước window</button>

Tuy nhiên, nếu bạn muốn tìm hiểu chiều rộng và chiều cao của cửa sổ ngoại trừ các thanh cuộn, bạn có thể sử dụng thuộc tính clientWidth và clientHeight của bất kỳ phần tử DOM nào (như div).

Hãy xem ví dụ sau để hiểu cách nó hoạt động:

<script>
function windowSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Tính kích thước window</button>

Lưu ý: Đối tượng document.documentElement đại diện cho phần tử gốc của tài liệu, là phần tử html, trong khi đối tượng document.body đại diện cho phần tử body. Cả hai đều được hỗ trợ trong tất cả các trình duyệt chính.