Để tạo các thiết kế trang web động và hoàn hảo về pixel, việc đo kích thước cửa sổ là rất quan trọng để hiểu và sử dụng. Bố cục trang web mong muốn có thể không được tạo nếu việc đo cửa sổ không được thực hiện hoặc sử dụng đúng cách. Thật không may, HTML/CSS không cung cấp bất kỳ thuộc tính hoặc thuộc tính nào để có được kiến thức chính xác về kích thước màn hình Cửa sổ và khoảng cách của cửa sổ so với ranh giới màn hình ban đầu.
May mắn thay! JavaScript giải quyết vấn đề này bằng cách cung cấp “ window.screenLeft” và “window.screenTop ” thuộc tính để đo vị trí của cửa sổ trên cả “ trục x” và “trục y ' tương ứng. Trọng tâm chính của chúng tôi trong bài viết này là xác định vị trí dọc theo trục X với sự trợ giúp của “ window.screenLeft ' tài sản. Vì vậy, hãy bắt đầu!
Blog này sẽ giải thích quy trình sử dụng hoặc truy cập thuộc tính window.screenLeft trong JavaScript.
Làm cách nào để truy cập thuộc tính “window.screenLeft” trong JavaScript?
Các ' window.screenLeft Thuộc tính ” của JavaScript trả về thông tin liên quan đến vị trí nằm ngang của cửa sổ, so với màn hình. Thuộc tính này trả về giá trị số ở định dạng pixel, hiển thị khoảng cách theo chiều ngang của cửa sổ với màn hình. Hãy truy cập đoạn mã dưới đây, trong đó “ window.screenLeft “Tài sản đang được sử dụng:
< thân hình >
< h1 phong cách = 'màu: xanh nước biển;' > Linux < / h1 >
< P nhận dạng = 'mục tiêu' > < / P >
< kịch bản >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Trái: ' + i;
< / kịch bản >
< / thân hình >
Mô tả đoạn mã trên:
- Đầu tiên, HTML “ P ” phần tử được tạo với id là “ mục tiêu ”.
- Tiếp theo, “ window.screenLeft Thuộc tính ” được sử dụng bên trong “< kịch bản >” gắn thẻ và lưu kết quả vào biến “ Tôi ”.
- Sau đó, chọn phần tử có id là “ mục tiêu ’ và chèn giá trị của “ biến i” sử dụng biến “ bên trongHTML ' tài sản.
Bản xem trước của trang web như sau:
Đầu ra hiển thị khoảng cách ngang từ ranh giới màn hình bên trái là 0 pixel.
Ví dụ: Truy xuất động giá trị theo chiều ngang
Thuộc tính screenLeft có thể được sử dụng cùng với thuộc tính “ thay đổi kích thước ” trình nghe sự kiện để cung cấp vị trí thời gian thực của cửa sổ tương ứng với màn hình dọc theo trục x. Theo cách tương tự, vị trí dọc theo trục y hoặc trục thẳng đứng cũng có thể được truy xuất bằng cách sử dụng “ window.screenTop ' tài sản. Hãy có một mã cho kịch bản nhất định:
< thân hình >< h1 phong cách = 'màu: xanh nước biển;' > Linuxhint < / h1 >
< P nhận dạng = 'Bài kiểm tra' >< / P >
< kịch bản >
chức năng năng động ( ) {
để tôi = window.screenLeft;
hãy để j = window.screenTop;
document.getElementById ( 'Bài kiểm tra' ) .innerHTML = 'Vị trí từ hướng trái:' + tôi + ', Từ hướng trên cùng: ' +j;
}
window.addEventListener ( 'thay đổi kích thước' , năng động ) ;
< / kịch bản >
Giải thích đoạn code trên như sau:
- Đầu tiên, phần tử được nhắm mục tiêu đã được tạo có id là “ Bài kiểm tra ”.
- Tiếp theo, “< kịch bản >” thẻ được sử dụng và thẻ “ năng động ()” được tạo trong đó.
- Bên trong hàm, hãy sử dụng “ window.screenLeft” và “window.screenTop ” thuộc tính và lưu trữ chúng trong “ tôi” và “j ” các biến tương ứng.
- Sau đó, chọn phần tử được nhắm mục tiêu bằng cách lấy id của nó “ Bài kiểm tra ” và với sự trợ giúp của “ bên trongHTML ” thuộc tính hiển thị giá trị cho cả hai “ tôi” và “j ” các biến trên trang web.
- Cuối cùng, đính kèm “ thay đổi kích thước ” trình nghe sự kiện với “ cửa sổ ” gợi lên “ năng động ()” mỗi khi kích thước cửa sổ thay đổi.
Xem trước trang web sau khi kết thúc quá trình biên dịch:
Trong kết quả đầu ra ở trên, sự khác biệt của cửa sổ từ phía trên và bên trái được nhận bằng pixel khi cửa sổ được thay đổi kích thước.
Đó là tất cả về “ window.screeLeft ” thuộc tính trong JavaScript.
Phần kết luận
Để truy cập vào “ window.screenLeft ” thuộc tính trong JavaScript và đính kèm thuộc tính “ thay đổi kích thước ” người nghe sự kiện tới “ cửa sổ ”. Điều này gọi hàm gọi lại mỗi khi kích thước của cửa sổ được thay đổi kích thước. Bên trong hàm này, tạo một biến lưu trữ “ window.screenLeft ' tài sản. Hơn nữa, truy xuất tham chiếu của phần tử được nhắm mục tiêu và hiển thị các giá trị của biến này trên đó. Blog này đã giải thích quy trình truy cập thuộc tính window.screenLeft trong JavaScript.