Изменение размеров элементов на jquery. Масштабирование элементов. Одновременное изменение размеров других элементов

23.02.2024Рубрика: Графика

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

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

Демо

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

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

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

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

Разбор проблемы

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

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

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

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

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

Послесловие

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

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

Пример : Задать при клике по элементам 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; }); })();