Масштабування елементів. Відслідковуємо "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

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; ));

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 методу. //використовуючи метод.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()); .test1 console. .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). ).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); Під спойлером З урахуванням побажань - більш розгорнутий код:

Розширений код

Код: Тут контент... ) - cм початок Коду; if(timerResize!=="first")clearTimeout(timerResize); / Тіло обробки події «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. Насамперед, подивимося, що відбувається, якщо опція такожResize не використовується. Відповідний код наведено у прикладі нижче:

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

Якщо опція alsoResize не використовується, то змінюються лише розміри елемента div. Розміри елементів, що містяться в ньому, залишаються незмінними. Що при цьому відбувається, показано на малюнку:

Іноді саме такий результат і потрібно отримати, але особисто я використовую опцію абоResize майже у всіх випадках застосування взаємодії Resizable. У цьому параметрі мені подобається те, що вибір відповідних елементів не обмежується вмістом елемента, розміри якого змінюються. За допомогою цієї опції можна вказати будь-який інший елемент, як показано на прикладі нижче:

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

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

Обмеження допустимих меж зміни розмірів елементів

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