JavaScript - объект window: свойства innerWidth, outerWidth и др.

На этом уроке мы рассмотрим свойства объекта 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



   JavaScript и jQuery 0    3124 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.