Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31


Чувашия-это моя Россия

Функции height() и width() в jQuery.

Для определения высоты и ширины элементов на странице сайта имеются функции height() и width() в библиотеке jQuery. Как обычно, назначив нужный селектор в выборке элементов можно для любого тега определить его высоту и его ширину.

Допустим, Вам пондобилось определяться габаритными значениями окна браузера, тогда Вы пишете:

 
                      var winH = $(window).height();
                      var winW = $(window).width()();

И Вы получите в переменных winH, winW соответственно значение для высоты и ширины окна браузера, потому как эти данные полезны, когда Вы обязуетесь гарантировать размещение элемента внутри области видимости документа.

Заметьте, что документ и окно браузера - не одно и тоже. Скорее они имеют различные размеры, чем одинаковые( в чем тут дело, надеюсь, понятно).

Для определения размеров документа на странице сайта воспользуйтесь селектором $(document) размер документа будете так:

 
                      var docH = $(document).height();
                      var docW = $(document).width());

Еще одно интересное применение функции height() и width() в jQuery получение значений высоты и ширины свойств CSS, которые не обязательно соответствуют параметрам высоты и ширины элемента страницы, то есть на языке CSS если Вы добавите поля (margin), отступы (padding), границы (border), то пространство занимаемое элементом на странице будет больше, чем значения свойств CSS height и width.

Далее будьте очень внимательны!

Допустим, элемент div имеет размер 400х400 пикселей в квадрате. Вы задаете по всем четырем сторонам отступ еще на 50 пикселей и устанавливаете толщину рамки 10 пикселей. Тогда у Вашего блока div высота станет h=400+50+10=460 пикселей и ширина станет w=400+50+10=460 пикселей, то есть размер будет 460х460 пикселей в квадрате.

Чувствуете разницу.

И поэтому в каждом случае применяется свое свойство вычисления значений высоты и ширины.

функции height() и width() возвращают значения свойств CSS элемента, то есть в данном случае 400 пикселей в каждую сторону..

 
                      var winH = $('div').height();
                      var winW = $('div').width();

функции innerHeight() и innerWidth() возвращают значения свойств CSS элемента height+ верхний и нижний отступы и width+левый и правый отступы, в данном случае 450 пикселей в каждую сторону.

 
                      var winH = $('div').innerHeight();
                      var winW = $('div')).innerWidth();

функции outerHeight() и outerWidth() возвращают значения свойств CSS элемента height+ верхний и нижний отступы + толщина рамки и width+левый и правый отступы+ толщина рамки, в данном случае 460 пикселей в каждую сторону.

 
                      var winH = $('div').outerHeight();
                      var winW = $('div').outerWidth();

функции outerHeight(true) и outerWidth(true) возвращают значения свойств CSS элемента height+ верхний и нижний отступы + толщина рамки+значение поля вокруг блока и width+левый и правый отступы+ толщина рамки + значение поля вокруг блока, в данном случае, если ширина поля вокруг блока div равна 100 пикселей, то будет 560 пикселей в каждую сторону.

 
                      var winH = $('div').outerHeight(true);
                      var winW = $('div').outerWidth(true);

Эти функции очень важны при оформления страниц сайта и установления интерактивных общений с посетителями, или при создании игр, когда Вам точно надо знать как будут располагаться или двигаться внутри элементов другие элементы. Тут, вариантов вагон и маленькая тележка.

Это не все!!!

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: