javascript методы для определения размеров объекта windows и их аналоги в jQuery

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

javascript методы для определения размеров объекта windows и их аналоги в jQuery

Во-первых, отметим глобальный объект javascript - window. Данный объект обладает методами, позволяющими работать с внешним окружением браузера - размер экрана, его разрешение и тд/, а так же с внутренними элементами браузера - панели браузера и кнопки. Среди наиболее популярных методов используемых пр работе с объектом window можно указать window.screen.height(window.screen.width), для тех кто не дружит с английским, поясню, что данный метод предоставляет значение высоты и ширины экрана пользователя. С его помощью Вы сможете определять порядок размещения информации на странице в зависимости от размера экрана пользователя. Ниже указана подробная таблица методов объекта window, заранее скажу, что всеми без исключения браузерами поддерживается только два метода:

• window.screen.height(window.screen.width);
• window.screen.availHeight(window.screen.availWidth).

В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите изменение значений в таблице.

javascript методы для определения размеров элемента body и их аналоги в jQuery

Во-вторых, на мой взгляд, более интересно изучать методы измерения размеров элементов, расположенных внутри элемента document, нежели методы объекта window. В большинстве случаев, при создании плагинов на jQuery, я применяю методы, позволяющие получить значения высоты страницы, смещение отдельных элементов относительно родительского элемента или относительно краёв клиентской части окна браузера. Больше всего я использую jQuery методы определения размеров основного элемента страницы - body. Наверняка и Вы, если Вы работаете с jQuery сталкивались с необходимостью знать подробное описание всех методов jQuery и их аналогов на javascript при работе с элементом body. Поэтому, обобщив собранный материал в интернете, я сделал сравнительную таблицу методов на javascript и jQuery.
В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите измененные значения в таблице.

По поводу элемента document.documentElement скажу лишь то, что он доступен, если браузер соответствует стандарту CSS1, то есть, если свойство document.compatMode == "CSS1Compat", иначе применяться должен элемент document.body. Если Вы не улавливаете смысл пишите следующий код в своих скриптах и он не вызовет у Вас ошибок:

• "return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollWidth : document.documentElement.scrollWidth);"
или соответсвтвенно для высоты body
• "return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight);"

Интерактивный пример получения величин измерения в javascript и jQuery

В-третьих, еще интереснее работать с элементами на странице. В jQuery, к примеру, существуют методы получения значений величины смещения дочернего элемента относительно границ его родительского элемента($(this).position().left($(this).position().top)), значений величины смещения элемента относительно верхней и левой границы страницы ($(this).position().left($(this).position().top)). В то же время, в javascript Вы не найдёте аналогов данных методов. Ниже указан интерактивный пример, с помощью которого Вы можете узнать значения элемента с id "select".
В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите изменение значений в таблице.

Как видите методы javascript:

• document.getElementById("select").scrollHeight(document.getElementById("select").scrollwidth)
• document.getElementById("select").scrollTop (document.getElementById("select").scrollLeft)

всегда остаются равными 0. В то время как их аналоги на jQuery предоставляют правильное значение. Почему же Вы спросите меня так происходит. Потому что я ввёл Вас в заблуждение, на самом деле указанные два метода javascript не являются аналогами методов jQuery:

• $(this).position().top($(this).position().left)
• $(this).offset().top($(this).offset().left)

javascript методы имеют самостоятельное значение, а какое Вы узнаете, когда добавить css свойство overflow:scroll; к элементу.

В заключение я укажу кроссбраузерную таблицу значений на javascript и их аналогов на jQuery

Описание	Метод		Значение
	javascript	jQuery	javascript				jQuery
Популярные браузеры (значения в px)
Высота body	document.body.clientHeight	$("body").height()	541	656	545	608	541	656	545	608
Ширина body	document.body.clientWidth	$("body").width()	968	969	963	968	968	969	963	968
Высота body	document.documentElement.clientHeight	$("body").height()	541	2426	2967	608	541	656	545	608
Ширина body	document.documentElement.clientWidth	$("body").width()	968	1009	1056	968	968	969	963	968
Смещение скроллбара от верхней границы рабочей области окна браузера	document.body.scrollTop	$(document.body).position().top	0	0	0	0	0	0	0	0
Смещение скроллбара от левого края рабочей области окна браузера	document.body.scrollLeft	$(document.body).position().left	0	0	0	0	0	0	20	0
Высота body, включающая свойства padding и border	document.body.offsetHeight	$("body").outerHeight()	541	656	545	608	541	656	545	608
Ширина body, включающая свойства padding и border	document.body.offsetWidth	$("body").outerWidth()	968	969	1003	968	968	969	1003	968
Размер правого скроллинга в px	document.body.scrollHeight	$("body").height()	541	2426	2967	608	541	656	545	608
Размер нижнего скроллинга в px	document.body.scrollWidt	$("body").width()	968	1009	1056	968	968	969	1003	968
Смещение body(margin) относительно document в px	нет	$("body").offset().top	нет	нет	нет	нет	0	0	0	0
Смещение body(margin) относительно document в px	нет	$("body").offset().left	нет	нет	нет	нет	0	0	20	0

На этом я закончу исследование методов javascript и jQuery, надеюсь мои знания о них Вам будут для полезны.

	
Значеине 
javascript	jQuery	javascript	jQuery 
Высота элемента 
document.getElementById("select").clientHeight 	$(this).height() 	4471	4451
Ширина элемента 	document.getElementById("select").clientWidth 	$(this).width() 	1778	1758
Смещение элемента от верхнего края родительского элемента 	document.getElementById("select").scrollTop; 	$(this).position().top 	0	-1350
Смещение элемента от левого края родительского элемента 	document.getElementById("select").scrollLeft; 	$(this).position().left 	0	-749
Смещение элемента от верхней границы рабочей области окна 	document.getElementById("select").scrollTop 	$(this).offset().top 	0	228
Смещение элемента от левого края рабочей области окна 	document.getElementById("select").scrollLeft 	$(this).offset().left 	0	-536
Высота элемента с учётом скроллинга 	document.getElementById("select").scrollHeight 	$(this).outerHeight() 	4477	4477
Ширина элемента с учётом скроллинга 	document.getElementById("select").scrollWidth 	$(this).outerWidth() 	1784	1784
Высота элемента, включающая свойства padding и border 	document.getElementById("select").offsetHeight 	$(this).outerHeight() 	4477	4477
Ширина элемента, включающая свойства padding и border 	document.getElementById("select").offsetWidth 	$(this).outerWidth() 	1784	1784