Условие при изменении размера jquery. Масштабирование элементов

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() ).

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

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

• 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

function showWidth(ele, w) { $("div").text("The width for the " + ele + " is " + w + "px."); } $("#getp").click(function () { showWidth("paragraph", $("p").width()); }); $("#getd").click(function () { showWidth("document", $(document).width()); }); $("#getw").click(function () { showWidth("window", $(window).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; }); })();

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