Slyweb
На разработку сайта! Скидки 50%!

jQuery для начинающего!

jQuery для начинающих.

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".
В таблице приведены значения актуальные для вашего браузера, измените размеры окна и Вы увидите изменение значений в таблице.

Элемент
перетащите элемент или измените его размеры
ОписаниеМетодЗначеине
javascriptjQueryjavascriptjQuery
Высота элемента document.getElementById("select").clientHeight $(this).height()
Ширина элемента document.getElementById("select").clientWidth $(this).width()
Смещение элемента от верхнего края родительского элемента document.getElementById("select").scrollTop; $(this).position().top
Смещение элемента от левого края родительского элемента document.getElementById("select").scrollLeft; $(this).position().left
Смещение элемента от верхней границы рабочей области окна document.getElementById("select").scrollTop $(this).offset().top
Смещение элемента от левого края рабочей области окна document.getElementById("select").scrollLeft $(this).offset().left
Высота элемента с учётом скроллинга document.getElementById("select").scrollHeight $(this).outerHeight()
Ширина элемента с учётом скроллинга document.getElementById("select").scrollWidth $(this).outerWidth()
Высота элемента, включающая свойства padding и border document.getElementById("select").offsetHeight $(this).outerHeight()
Ширина элемента, включающая свойства padding и border document.getElementById("select").offsetWidth $(this).outerWidth()

Как видите методы 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

ОписаниеМетодЗначение
javascriptjQueryjavascriptjQuery
Популярные браузеры (значения в px) FireFox Chrome Internet Explorer Opera FireFox Chrome Internet Explorer Opera
Высота 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, надеюсь мои знания о них Вам будут для полезны.


Александр Ермаков