Для создания динамичного и идеального до пикселя дизайна веб-страниц очень важно понимать и использовать измерения размера окна. Желаемый макет веб-страницы может не быть создан, если размеры окна не измерены или не используются правильно. К сожалению, HTML/CSS не предоставил никаких атрибутов или свойств для получения точных данных о размере экрана окна и расстоянии окна от исходных границ экрана.
К счастью! JavaScript решает эту проблему, предоставляя свой « window.screenLeft» и «window.screenTop ” свойства для измерения положения окна как на “ x» и «ось Y ' соответственно. Наша главная цель в этой статье — получить позицию по оси X с помощью « окно.screenLeft ' свойство. Итак, начнем!
В этом блоге объясняется процедура использования или доступа к свойству window.screenLeft в JavaScript.
Как получить доступ к свойству «window.screenLeft» в JavaScript?
« окно.screenLeft Свойство JavaScript возвращает информацию, связанную с горизонтальным положением окна относительно экрана. Это свойство возвращает числовое значение в формате пикселей, показывающее расстояние по горизонтали от окна до экрана. Посетите приведенный ниже код, в котором « окно.screenLeft » имущество используется:
< тело >
< ч1 стиль '=' «Цвет: морской зеленый;» > Линукс < / ч1 >
< п идентификатор '=' 'цель' > < / п >
< сценарий >
пусть я = window.screenLeft;
document.getElementById('target').innerHTML = 'Left: ' + i;
< / сценарий >
< / тело >
Описание приведенного выше кода:
- Во-первых, HTML « п элемент создается с идентификатором « цель ».
- Далее « окно.screenLeft Свойство ” используется внутри “< сценарий >» и сохраняет результат в переменной « я ».
- Затем выберите элемент с идентификатором « цель ’ и вставьте значение « i» с использованием переменной « внутреннийHTML ' свойство.
Предварительный просмотр веб-страницы выглядит следующим образом:
Вывод показывает, что расстояние по горизонтали от левой границы экрана равно нулю пикселей.
Пример: динамическое получение горизонтального значения
Свойство screenLeft можно использовать вместе с свойством « изменить размер прослушиватель событий, чтобы обеспечить положение окна, соответствующего экрану, в реальном времени по оси X. Таким же образом положение по оси Y или вертикальной оси также можно получить, используя команду « окно.screenTop ' свойство. Давайте иметь код для данного сценария:
< тело >< ч1 стиль '=' «Цвет: морской зеленый;» > Линуксхинт < / ч1 >
< п идентификатор '=' 'тест' >< / п >
< сценарий >
функция динамическая ( ) {
дайте я '=' окно.экранЛефт;
пусть Дж '=' окно.экранТоп;
документ.getElementById ( 'тест' ) .innerHTML '=' 'Позиция слева: ' + я + ', Сверху: ' + дж;
}
окно.addEventListener ( 'изменить размер' , динамичный ) ;
< / сценарий >
Объяснение приведенного выше кода следующее:
- Во-первых, целевой элемент был создан с идентификатором « тест ».
- Далее, «< сценарий >» и тег « динамичный ()» в нем создается функция.
- Внутри функции используйте « window.screenLeft» и «window.screenTop » свойства и сохранить их в « я» и «дж переменные соответственно.
- После этого выберите целевой элемент, получив его идентификатор « тест » и с помощью « внутреннийHTML ” отображает значения для обоих “ я» и «дж »переменные на веб-странице.
- В конце прикрепите « изменить размер прослушиватель событий с параметром « окно », который вызывает « динамичный ()» функционируют каждый раз, когда размер окна изменяется.
Предварительный просмотр веб-страницы после окончания компиляции:
В приведенном выше выводе разница окна с верхней и левой сторон получается в пикселях при изменении размера окна.
Вот и все, что касается « окно.screeLeft ” в JavaScript.
Заключение
Чтобы получить доступ к « окно.screenLeft ” в JavaScript и прикрепите свойство “ изменить размер ” прослушиватель событий “ окно ». Это вызывает функцию обратного вызова каждый раз, когда размер окна изменяется. Внутри этой функции создайте переменную, в которой будет храниться « окно.screenLeft ' свойство. Более того, получите ссылку на целевой элемент и отобразите над ней значения этой переменной. В этом блоге описан процесс доступа к свойству window.screenLeft в JavaScript.