Windows javascript

Windows javascript

На этом уроке мы рассмотрим свойства объекта window, с помощью которых Вы можете получить размеры рабочей области окна браузера (innerWidth и innerHeight), размеры самого окна (outerWidth и outerHeight), его расположения относительно левого верхнего угла экрана пользователя (screenLeft и screenTop) и положений прокрутки (pageXOffset и pageYOffset).

Свойства JavaScript innerWidth, outerWidth, screenLeft и др.

Они предназначены для получения размеров видимой рабочей области окна браузера. Т.е. свойства innerWidth и innerHeight предназначены для получения значений ширины и высоты области, в которой отображается HTML-документ. Эти свойства доступны только для чтения и возвращают значения в пикселях.

Например, получить высоту и ширину видимой рабочей области окна браузера:

  <p>Ширина видимой области просмотра (widthContenArea): <span id="widthContenArea"></span></p>  <p>Ширина видимой области просмотра (heightContenArea): <span id="heightContenArea"></span></p>  <script>  // ширина видимой области просмотра (для всех браузеров, кроме Internet Explorer 8)   var widthContenArea = window.innerWidth;  // высота видимой области просмотра (для всех браузеров, кроме Internet Explorer 8)   var heightContenArea = window.innerHeight;  // ширина видимой области просмотра (для Internet Explorer 8)  widthContenArea = document.documentElement.clientWidth || document.body.clientWidth;   // высота видимой области просмотра (для Internet Explorer 8)   heightContenArea = document.documentElement.clientHeight || document.body.clientHeight;  // ширина видимой области просмотра (для всех браузеров)  widthContenArea1 = window.innerWidth || document.documentElement.clientWidth ||  document.body.clientWidth;  // высота видимой области просмотра (для всех браузеров)  heightContenArea1 = window.innerHeight || document.documentElement.clientHeight ||  document.body.clientHeight;  document.getElementById("widthContenArea").innerHTML = widthContenArea;  document.getElementById("heightContenArea").innerHTML = heightContenArea;  </script>  

Они предназначены для получения размеров всего окна браузера, т.е. включая панели инструментов, полосы прокрутки, строку состояния, границы окна и т.д. Свойства outerWidth и outerHeight доступны только для чтения и возвращают соответственно ширину и высоту окна в пикселях.

Например, получить высоту и ширину окна браузера:

  <p>Ширина окна браузера (widthWindow): <span id="widthWindow"></span></p>  <p>Высота окна браузера (heighWindow): <span id="heightWindow"></span></p>  <script>  // ширина окна браузера  var widthWindow = window.outerWidth;  // высота окна браузера  var heightWindow = window.outerHeight;  document.getElementById("widthWindow").innerHTML = widthWindow;  document.getElementById("heightWindow").innerHTML = heightWindow;  </script>  

Они предназначены для получения координаты левого верхнего угла окна браузера или документа относительно левого верхнего угла экрана пользователя.

При этом свойства screenLeft и screenTop работают в Internet Explorer, а свойства screenX и screenY в Mozilia Firefox. В браузерах Chrome, Safari и других подобных браузерах можно использовать как свойства screenLeft и screenTop, так и свойства screenX и screenY.

При использовании данных свойств необходимо учитывать тот факт, что некоторые браузеры могут возвращать координату левого верхнего угла документа, а некоторые браузеры координату левого верхнего угла окна. Свойства screenleft (screenX) и screenTop (screenY) доступны только для чтения и возвращают соответственно значения расстояний относительно левого угла экрана по горизонтали и вертикали в пикселях.

Например, выведем виде сообщения координаты х и у левого угла текущего окна браузера (документа) относительно левого верхнего угла экрана:

  <script>  function windowXY() {    // Используя свойства screenleft и screenTop, получаем координаты расположения окна (документа)    var winX = window.screenLeft;     var winY = window.screenTop;    // Используя свойства screenX и screenY, получаем координаты расположения окна (документа)    winX = window.screenX;     winY = window.screenY;    // Получаем координаты расположения окна (документа) во всех браузерах    winX = window.screenX ? window.screenX : window.screenLeft;     winY = window.screenY ? window.screenY : window.screenTop;     window.alert ("Координаты окна относительно экрана пользователя: X = " + winX + ", Y = " + winY + ".");  }  </script>  <a href="javascript:windowXY()">Узнать координаты</a>  

JavaScript - пример работы со свойствами screenLeft и screenTop

Они предназначены для получения количества пикселей, на которые документ был прокручен в горизонтальном (pageXOffset) или вертикальном (pageYOffset) направлении относительного левого верхнего угла окна. Свойства scrollX и scrollY эквиваленты соответственно свойствам pageXOffset и pageYOffset. Эти свойства доступны только для чтения.

Например, вывести в сообщении количество пикселей, на которые документ был прокручен в горизонтальном (pageXOffset) и вертикальном (pageYOffset) направлении.

  <script>  function scrollContent() {    //Прокрутим текущий документ на 200рх вправо и вниз    window.scrollBy(200,200);    //Получим значения, используя свойства pageXOffset и pageYOffset    var winOffsetX = window.pageXOffset;    var winOffsetY = window.pageYOffset;    //Получим значения, на которые документ был прокручен в горизонтальном или вертикальном направлении для Internet Explorer:    winOffsetX = document.documentElement.scrollLeft;     winOffsetY = document.documentElement.scrollTop;    //Для всех браузеров:    winOffsetX = window.pageXOffset || document.documentElement.scrollLeft;    winOffsetY = window.pageYOffset || document.documentElement.scrollTop;    alert ("Количество пикселей, на которые документ был прокручен в горизонтальном и вертикальном направлении: X = " + winOffsetX + ", Y = " + winOffsetY + ".");  }  </script>  <a href="javascript:scrollContent()">Узнать положения полос прокрутки</a>  

JavaScript - пример работы со свойствами pageXOffset и pageYOffset



Источник: itchief.ru


Добавить комментарий