Chiều cao và chiều rộng là những kích thước quan trọng nhất trong khi thiết kế bố cục của trang web.
“Chiều cao” biểu thị phép đo chiều dài của một đối tượng từ trên xuống dưới trong khi “chiều rộng” cho biết độ rộng của một đối tượng từ cạnh này sang cạnh kia. Các yếu tố này hỗ trợ điều chỉnh việc phân bổ đối tượng trong cửa sổ. Trong JavaScript, “ chiều cao ' Và ' chiều rộng ” thuộc tính được phân loại thành hai loại “inner” tức là “innerHeight/innerWidth” và “outer” tức là “outerHeight/outerWidth”, tương ứng.
Bài viết này giải thích chi tiết về mục tiêu và hoạt động của thuộc tính Window “innerHeight” trong JavaScript.
Thuộc tính Window “innerHeight” làm gì trong JavaScript?
Các ' chiều cao bên trong ” thuộc tính được liên kết với đối tượng “cửa sổ” truy xuất chiều cao chế độ xem của cửa sổ trình duyệt ngoại trừ thanh vị trí, thanh công cụ, thanh menu và các đối tượng khác. Ngoài ra, nó bao gồm chiều cao của thanh cuộn ngang nếu nó được bao gồm. Giá trị được trả về của thuộc tính này được lấy từ cửa sổ “chế độ xem bố cục”, tức là khu vực hiển thị nội dung trang web.
Cú pháp cơ bản
window.innerHeight HOẶC InternalHeight
Theo cú pháp trên, “ chiều cao bên trong ” có thể dễ dàng áp dụng trực tiếp hoặc sử dụng đối tượng “window”.
Hãy triển khai thực tế thuộc tính được xác định ở trên với sự trợ giúp của cú pháp cơ bản của nó.
Ví dụ 1: Áp dụng Thuộc tính “innerHeight” của Cửa sổ để Trả về Chiều cao Khung nhìn của Cửa sổ Trình duyệt
Ví dụ này sử dụng thuộc tính “innerHeight” với đối tượng “window” để lấy chiều cao khung nhìn của cửa sổ trình duyệt.
Mã HTML
Trước tiên, hãy xem mã được nêu dưới đây:
< h2 > Thuộc tính window innerHeight h2 >< cái nút trong một cái nhấp chuột = 'jsFunc()' > Nhận chiều cao cái nút >
< P nhận dạng = 'vì' > P >
Trong các dòng mã trên:
- Các ' ” thẻ xác định tiêu đề phụ cấp 2.
- Các '
” thẻ biểu thị nút có sự kiện “onclick” để gọi hàm “jsFunc()” khi sự kiện được kích hoạt. - Các ' ” thẻ thêm một đoạn trống có id được chỉ định là “para” để hiển thị giá trị trả về của thuộc tính “innerHeight” được áp dụng.
Mã JavaScript
Bây giờ, hãy tiếp tục với đoạn mã dưới đây:
< kịch bản >chức năng jsFunc ( ) {
cho phép h = window.innerHeight;
tài liệu.getElementById ( 'vì' ) .innerHTML = 'Chiều cao bên trong của cửa sổ:' +h;
}
kịch bản >
Trong các dòng mã trên:
- Đầu tiên, xác định một hàm có tên là “ jsFunc() ”.
- Theo định nghĩa của nó, biến “h” áp dụng “ chiều cao bên trong ” bằng cách sử dụng đối tượng “window”.
- Sau đó, áp dụng “ getElementById() ” để lấy đoạn trống đã thêm bằng cách sử dụng id “para” của nó và hiển thị chiều cao bên trong của cửa sổ trình duyệt hiện tại trong đó.
đầu ra
Như được hiển thị trong đầu ra ở trên, cửa sổ trình duyệt hiện tại hiển thị chiều cao khung nhìn (chiều cao bên trong), tức là, “ 599px ” khi nhấp vào nút.
Ví dụ 2: Áp dụng Thuộc tính “innerHeight” và “innerWidth” của Cửa sổ kết hợp
Thuộc tính “innerHeight” có thể được triển khai cùng với các thuộc tính kích thước khác, chẳng hạn như “innerWidth”, “outerWidth”, “outerHeight”, v.v. Trong trường hợp này, thuộc tính này được sử dụng cùng với “ chiều rộng bên trong ' tài sản.
Mã HTML
Hãy có một cái nhìn tổng quan về mã HTML đã sửa đổi:
< h2 > Cửa sổ thuộc tính InternalHeight và InternalWidth h2 >< cái nút trong một cái nhấp chuột = 'jsFunc()' > Nhận Chiều cao và Chiều rộng cái nút >
< P nhận dạng = 'vì' > P >
Tại đây, nội dung của các phần tử “