Масштабирование элементов. Отслеживаем «onresize» на элементе Одновременное изменение размеров других элементов

05.12.2023

Возвращает, устанавливает ширину элемента.

version added: 1.0 .width()
Возвращает : Целое число

Получает ширину элемента
version added: 1.0 .width(value)
Тип : Строка или Число

Возвращает : jQuery

Целое число, представляющее количество пикселей, или число с единицей измерения в виде строки.
version added: 1.4.1 .width(function(index, width))
function(index, width)

Тип : Функция

Возвращает : jQuery

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

Разницу между.css("width") и.width() в то, что данный метод возвращает исключительно числовое значение (к примеру, 400, а не 400px). Метод.width() рекомендуется использовать, когда полученное значение необходимо задействовать в математических вычислений.

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

$(window).width(); $(document).width();

Заметьте, что метод.width() всегда возвращает ширину контента, не учитывая от значения свойства CSS box-sizing. Начиная с jQuery 1.8, вам необходимо получить значение свойства box-sizing, затем отнять размер рамки и отступов. Всё это в том случае, если к элементу применяется свойство box-sizing: border-box. Чтобы избежать этих вычислений, используйте.css("width").

Передать в метод.width(value), можно как строку, так и число. Если передано только число, то jQuery автоматом прибавляет “px”. Если строка, то она должна выглядеть так: 100px, 50%, или auto. Просим заметить, что в современных бразуерах в ширину не входят значения отступов и рамки.

Примеры:

Пример : Показать различия значений ширины элементов. Поскольку элементы находятся в iframe, то настоящие размеры могут быть чуть другими.

width demo body { background:yellow; } button { font-size:12px; margin:2px; } p { width:150px; border:1px red solid; } div { color:red; font-weight:bold; } Get Paragraph Width Get Document Width Get Window Width

Sample paragraph to test width

Пример : Задать при клике по элементам div различную ширину.

width demo div { width: 70px; height: 50px; float:left; margin: 5px; background: red; cursor: pointer; } .mod { background: blue; cursor: default; } d d d d d (function() { var modWidth = 50; $("div").one("click", function () { $(this).width(modWidth).addClass("mod"); modWidth -= 8; }); })();

jQuery DOM методы Определение и применение

jQuery метод .width() получает текущее вычисленное значение ширины для первого элемента в наборе совпавших элементов, или устанавливает ширину каждого соответствующего элемента.

Обращаю Ваше внимание, что разница между методами .css ("width ") и .width() заключается в том, что последний возвращает значение без указания единиц измерения, тогда как первый возвращает значение в пикселях (пример приведен ниже).

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

jQuery метод .width() также сможете найти ширину окна, или документа:

$(document ).width() // возвращает ширину HTML документа $(window ).width() // возвращает ширину области просмотра браузера

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

Метод с версии jQuery 1.8 вычисляет и возвращает ширину элемента независимо от того какая модель вычисления ширины и высоты используется (content-box , или border-box свойства box-sizing ). То есть метод будет вычитать границы и внутренние отступы. Если Вас это не устраивает, то используйте метод .css ("width "). Пример сравнения двух моделей и этих методов представлен ниже.

jQuery синтаксис: Возвращение значений: Синтаксис 1.0: $(selector ).width() // метод используется без параметров Установка значений: Синтаксис 1.0: $(selector ).width(value ) value - String (значение в произвольных единицах измерения), или Integer (значение в пикселях) Синтаксис 1.4.1: $(selector ).width(function (index , currentValue )) index - Integer currentValue - Integer . Добавлен в версии jQuery 1.0 (синтаксис обновлен в 1.4.1) Значения параметров Пример использования Использование jQuery метода.width() (возвращение значения) console .log($("p ").css("width ")); // используя метод.css()

console .log($("p ").width()); // используя метод.width() возвращаем и выводим в консоль браузера значение ширины первого элемента

console .log($(document ).width()); // возвращает и выводит в консоль браузера ширину HTML документа console .log($(window ).width()); // возвращает и выводит в консоль браузера ширину области просмотра браузера } ); } ); Клик

Обычный абзац

Второй обычный абзац

.css() возвращаем и выводим в консоль браузера значение ширины первого элемента
.
с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины первого элемента
, ширину HTML документа и значение ширины области просмотра браузера.

Результат нашего примера:

Рассмотрим следующий пример в котором мы рассмотрим отличие метода .width() от метода .css() при использовании моделей вычисления ширины и высоты элементов content-box и border-box :

Использование jQuery метода.width() (модели content-box и border-box)

.test1 { box-sizing : content-box ; /* модель по умолчанию (включает в себя только содержание элемента) */ width : 200px ; /* ширина элемента */ padding : 10px ; border : 10px solid green ; } .test2 { box-sizing : border-box ; /* модель border-box (включает в себя содержание элемента, границы и внутренние отступы) */ width : 200px ; /* ширина элемента */ padding : 10px ; /* внешние отступы со всех сторон */ border : 10px solid green ; /* сплошная граница зеленого цвета размером 10 пикселей */ }

$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент console .log($(".test1 ").css("width ")); // используя метод.css() с классом.test1 console .log($(".test1 ").width()); // используя метод.width() возвращаем и выводим в консоль браузера значение ширины элемента с классом.test1 console .log($(".test2 ").css("width ")); // используя метод.css() возвращаем и выводим в консоль браузера значение ширины элемента с классом.test2 console .log($(".test2 ").width()); // возвращает и выводит в консоль браузера значение ширины элемента с классом.test2 } ); } ); Клик

Обычный абзац

В этом примере мы при нажатии на кнопку:

с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение ширины элемента
с классом test1 и test2 . Обратите внимание независимо от того какую модель используют элементы результат вывода будет один.
с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины элемента
с классом test1 и test2 . Обратите внимание, что во втором случае, где элемент
использует модель border-box , значение вывода не включает в себя как границы элемента, так и внутренние отступы. В этом заключается отличие этого метода от метода .css() при использовании метода border-box .

Результат нашего примера:

.width() мы будем устанавливать значения ширины, а не возвращать.

Использование jQuery метода.width() (установка значений)

p { background-color : orange ; }

$(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $(".test1 ").width(150 ); // устанавливаем ширину элементам с классом test1 в пикселях $(".test2 ").width("35% "); // устанавливаем ширину элементам с классом test2 в процентах } ); } ); Клик

Обычный абзац

В этом примере мы при нажатии на кнопку с использованием jQuery метода .width() устанавливаем значение ширины элементам

с классом test1 равную 150 пикселей , а элементам с классом test2 значение ширины равную 35% от родительского элемента.

Обратите внимание на то, что если вы задаете значение не в пикселях (без указания единиц измерения), то значение необходимо передавать в виде строки.

Результат нашего примера:

Рассмотрим следующий пример в котором в качестве параметра метода .width() мы передадим функцию.

Использование jQuery метода.width() (функция в качестве параметра)

div { background-color : yellow ; /* устанавливаем цвет заднего фона */ }

$(document ).ready(function (){ $("div ").click(function (){ // задаем функцию при нажатиии на элемент $(this ).width(function (index , currentValue ){ // задаем функцию при нажатиии на конкретный элемент return currentValue - 50; // возвращаем новое значение ширины элемента (текущее значение минус 50 пикселей) } ); } ); } ); Клик

В этом примере мы в качестве параметра метода .width() передаем функцию, которая возвращает и устанавливает новое значение ширины элемента по которому произведен клик. В нашем случае новая ширина элемента высчитывается как текущая ширина элемента минус 50 пикселей .

Результат нашего примера:

Рассмотрим следующий пример в котором с помощью метода .resize() и метода .width() будем отслеживать ширину области просмотра браузера и при её изменении устанавливать определённый цвет заднего фона.

Использование jQuery метода.width() при изменении ширины окна $(document ).ready(function (){ $(window ).resize(function () { // привязываем обработчик событий (срабатывает при изменении размеров окна) if ($(this ).width() 1000 && $(this ).width() > 800) { // Если ширина области просмотра меньше 1000 пикселей и больше 800 пикселей $("body ").css("background-color ", "yellow "); // устанавливаем цвет заднего фона желтый } else if ($(this ).width() 800 && $(this ).width() > 600) { // Если ширина области просмотра меньше 800 пикселей и больше 600 пикселей $("body ").css("background-color ", "green "); // устанавливаем цвет заднего фона зеленый } else { // если не соответствует ни одному условию $("body ").css("background-color ", "blue "); // устанавливаем цвет заднего фона синий } } ); } ); Try to resize window

В этом примере с помощью метода .resize() и метода .width() мы отслеживаем ширину области просмотра браузера и при её изменении устанавливаем определённый цвет заднего фона элементу 1000 пикселей и больше 800 пикселей желтый . Если ширина области просмотра меньше 800 пикселей и больше 600 пикселей , то цвет заднего фона будет установлен зеленый , в других случаях цвет заднего фона будет установлен как синий .

Обратите внимание, что при загрузке страницы цвет будет белый , так как функция запуститься только при изменении размеров окна (jQuery метод .resize() ).

Результат нашего примера.

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных с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);

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~

Масштабирование элементов (взаимодействие 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. Пример использования этих настроек приведен ниже.