Width() .innerWidth() .outerWidth()

Функции возвращают ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины. Имеется несколько вариантов использования функций:

width() — ширина элемента без учета отступов и толщины рамки.
innerWidth() — ширина элемента с учетом размера внутренних отступов (padding).
outerWidth(includeMargin) — ширина элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin).

устанавливает новое значение ширины равное value , для всех выбранных элементов

устанавливает новое значение ширины элементов, равное значению, которое вернет пользовательская функция. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе , value — текущее значение ширины элемента.

Примеры использования:

$("div.content").width() content .
$(document).width() возвратит ширину всей страницы
$(".content").width(30) устанавливает значение ширины в 30 пикселей всем элементам с классом content .
$("div.content").outerWidth() возвратит ширину первого div-элемента с классом content . В значение высоты будут включены внутренние отступы и толщина рамок
$("div.content").outerWidth(true) аналогично предыдущему примеру, но в значение ширины будут так же включены внешние отступы.

Замечание 1 : использование функции.width() обычно удобнее, чем .css("width") , поскольку возвращаемое ей значение не содержит окончания "px". То есть в первом случае, вы получите 30, а во втором "30px".

Замечание 2 : важно отметить, что используя метод.width(name) вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each() .

В действии

Увеличим ширину всех элементов во второй строке на 10 пикселей.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ ul{ margin: 10px; } .item{ float: left; height:20px; margin: 1px; padding: 3px; background-color: #eee; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item" style="width:60px"~gt~ Высоко ~lt~/li ~gt~ ~lt~li class="item iioo" style="width:75px"~gt~ Быстро ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Сильно ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~br~gt~ ~lt~ul id="list2"~gt~ ~lt~li class="item" style="width:60px"~gt~ Выше ~lt~/li ~gt~ ~lt~li class="item" style="width:75px"~gt~ Быстрее ~lt~/li ~gt~ ~lt~li class="item" style="width:90px"~gt~ Сильнее ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list2 .item").width(function(i,val){ return val+10; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, - не использующий таймирующий опрос.

Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%-(ыми) размерами, придаём элементу position:relative; . И отслеживаем frame.onresize :

Тест-Код: Тут контент... frame.onresize = function(){ alert("Размеры div #Test изменены."); } setTimeout(function(){ //Тестовое изменение размера через 3сек. document.getElementById("Test").style.width="100px"; },3000); Под спойлером С учётом пожеланий, - более развёрнутый код:

Расширенный код

Код: Тут контент... setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ) var timerResize="first"; frame.onresize = function(){ // frame, - Имя фрейма (name=frame) - cм начало Кода; if(timerResize!=="first")clearTimeout(timerResize); timerResize=setTimeout(function(){ // Задержка для очистки чрезмерных срабатываний; alert("Размеры div #Test изменены."); // Тело обработки события «onresize»; },20) // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события; // актуально при плавных изменениях размера элемента, // либо почти одновременное изменением размера несколькими разными процессами. } },200); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width="100px"; },3000); setTimeout(function(){ //Тестовое изменение размера. document.getElementById("Test").style.width="200px"; },7000);

Масштабирование элементов (взаимодействие Resizable)

Взаимодействие Resizable добавляет в элемент манипуляторы, перемещая которые, пользователь может масштабировать элемент путем изменения его размеров. Некоторые браузеры автоматически предоставляют такую возможность для текстовых областей, но взаимодействие Resizable обеспечивает возможность подобного масштабирования для любого элемента в документе. Пример применения данного вида взаимодействия, которое реализуется с помощью метода resizable() , приведен ниже:

jQuery UI #astor, #lily {text-align: center; width: 150px; float: left; margin: 20px} #astor img, #lily img {display: block; margin: auto} $(function() { $("#astor").resizable({ alsoResize: "#astor img" }); }); Астра .png" /> Лилия .png" /> Запустить пример

В этом примере создаются два элемента div, каждый из которых содержит элемент img и текст. В сценарии один из них выбирается, и к нему применяется метод resizable() (с использованием параметра alsoResize, который будет описан далее). Библиотека jQuery UI добавляет к выбранному элементу манипулятор, позволяющий изменять вертикальный и горизонтальный размеры элемента, как видно на рисунке. На рисунке элемент представлен с увеличенной высотой и уменьшенной шириной:

Настройка взаимодействия Resizable

Для настройки взаимодействия Resizable используются свойства, описанные в таблице ниже. Взаимодействие Resizable зависит от взаимодействия Draggable . Это означает, что в дополнение к настройкам, приведенным в таблице, можно использовать настройки взаимодействия Draggable, в том числе такие, как delay, distance, grid и containment.

Свойства взаимодействия Resizable Свойство Описание
alsoResize Селектор, используемый для выбора элементов, размеры которых должны изменяться одновременно с размерами элемента, к которому применено взаимодействие Resizable. Значение по умолчанию - false, оно означает отсутствие таких элементов
aspectRatio Если значение этой опции равно true, то изменение размеров элемента будет происходить с сохранением пропорции соотношения сторон. Значение по умолчанию - true
autoHide Если значение этой опции равно true, то манипуляторы становятся видимыми лишь тогда, когда указатель мыши располагается над элементом. Значение по умолчанию - false
ghost Если значение этой опции равно true, то при изменении размеров элемента будут видны полупрозрачные контуры, отображающие новые размеры элемента. Значение по умолчанию - true
handles Определяет, где будут располагаться манипуляторы. Поддерживаемые значения приведены далее
maxHeight Определяет максимальную высоту, до которой можно изменить размеры элемента. Значение по умолчанию - null, оно означает отсутствие ограничений
maxWidth Определяет максимальную ширину, до которой можно изменить размеры элемента. Значение по умолчанию - null
minHeight
minWidth Определяет минимальную высоту, до которой можно изменить размеры элемента
Одновременное изменение размеров других элементов

По моему мнению, наиболее употребительной при настройке взаимодействия Resizable является опция alsoResize. С ее помощью можно определить дополнительные элементы, размеры которых будут изменяться одновременно с размерами элемента, к которому был применен метод resizable(). Я использую эту опцию главным образом для того, чтобы обеспечить синхронное изменение размеров элементов вместе с размерами их родительских элементов.

Мы уже использовали эту возможность в предыдущем примере, определив одновременное изменение размеров элементов img и div. Прежде всего, посмотрим, что происходит, если опция alsoResize не используется. Соответствующий код приведен в примере ниже:

$(function() { $("#astor").resizable(); });

Если опция alsoResize не используется, то изменяются только размеры элемента div. Размеры содержащихся в нем элементов остаются неизменными. Что при этом происходит, показано на рисунке:

Иногда именно такой результат и требуется получить, но лично я использую опцию alsoResize почти во всех случаях применения взаимодействия Resizable. В этом параметре мне нравится то, что выбор подходящих элементов не ограничивается содержимым того элемента, размеры которого изменяются. С помощью этой опции можно указать любой другой элемент, как показано в примере ниже:

$(function() { $("#astor").resizable({ alsoResize: "img, #lily" }); });

В этом сценарии выбор элементов расширен с целью включения других элементов div и img. Таким образом, при изменении размеров одного элемента div jQuery UI будет изменять размеры сразу четырех элементов. Результат представлен на рисунке:

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

Можно ограничить пределы изменения размеров масштабируемых элементов, применив опции maxHeight, maxWidth, minHeight и minWidth. Значениями этих опций могут быть числа, выражающие количество пикселей, или null. Пример использования этих настроек приведен ниже.