Масштабирование элементов. Работа с шириной элемента Определение и применение

Width() .innerWidth() .outerWidth()

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

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

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

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

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

Замечание 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 зависит от взаимодействия Draggable . Это означает, что в дополнение к настройкам, приведенным в таблице, можно использовать настройки взаимодействия Draggable, в том числе такие, как delay, distance, grid и containment.

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

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

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

Я создал небольшое демо, с помощью которого я хочу наглядно показать, почему я решил написать эту запись.

Кто-то может сказать, что получение высоты и ширины элемента — это самое просто, что может быть, но я бы так не стал говорить. Особенно, если не знать нюансы, которые присутствуют в самом процессе.

В примере ниже есть два блока. Слева фиолетовый, а справа оранжевый. С помощью jQuery, внутри каждого из них я написал ширину и высоту блока двумя разными методами.

Первый блок показывает настоящую высоту и ширину элемента, когда второй показывает ширину/высоту начиная с границ padding , который я прописал в CSS для этих элементов. Смотрите в разделе «Разбор проблемы» (ниже), чтобы понять почему так происходит.

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

Я сделаю скриншот пример выше и перенесу его сюда, чтобы вы понимали о чем идет речь.

Слева учитывается настоящая ширина и высота фиолетового блока (с учетом padding). Справа учитывается ширина блока по границам padding свойства. Оба блока имеют свойства padding с значением 20, то блок со всех сторон отступает на 20 пикселей.

Для блока слева я использовал .outerWidth() и .outerHeight() , которые берут настоящие ширину и высоту элемента. В данном случае, padding: 20px не учитывается.

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

Если у вас остались какие-либо вопросы — задавайте их ниже под этой записью.

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

• 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; }); })();