Ширина элемента jquery: Метод .width() | jQuery справочник

размеры элемента — учебник CSS

Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.

Особенности вычисления ширины и высоты

Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).

В качестве значения ширины можно использовать и единицу em, которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px. Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em, то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.

Высота height, заданная в процентах, вычисляется аналогичным образом, что и ширина, но расчет основывается уже на высоте родительского элемента, а не на его ширине. Если родитель отсутствует, высота будет зависеть от высоты окна браузера.

Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя

Что входит в ширину и высоту

Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin, padding и border. Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.

Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width,

padding, border и margin. Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.

Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:

width: 200px;
margin-left: 15px;
margin-right: 15px;
padding-left: 10px;
border-left: 3px solid #333;

Для подсчета фактической ширины элемента выполним сложение:

width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)

Рекомендации по высоте

Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.

Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.

Другой способ избежать развала верстки — использовать запись overflow: auto. В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.

 

В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.

Splitter на jQuery

На jQuery в интернете сложно найти простой и лёгкий плагин для создания сплиттера. Есть различные варианты, либо не работающие, либо требующие подключения таких монстров как jqwidgets и jQuery UI.

Потратив много времени на поиски чего-то вроде jquery splitter, я решил создать такой плагин самостоятельно.

И это заняло всего пару часов времени.

Постараюсь сэкономить своё и ваше время, поэтому кратко опишу специфику данного функционала:

1. Основную вёрстку можно делать обычной таблицей, а можно сделать блочной вёрсткой, используя табличной отображение (display:table, display:table-row, display:table-cell). Несмотря на то, что даже я уже много лет не пользуюсь табличной вёрсткой, в данном случае она более чем уместна.
2. В таблице три колонки, средняя используется как сплиттер. От её ширины в конечном итоге ничего не зависит, поэтому можно сделать узкую или широкую.
3. Ширина меняется в пикселях, не в процентах, и изначально можно задать произвольную ширину (задаётся только для левой колонки, ширина правой — автоматическая).
4. Общий принцип: в момент нажатия мышкой на сплиттере (событие mousedown) включаем флаг dragging, который означает процесс перемещения сплиттера (а также определяем смещение в самом сплиттере — на каком расстоянии от левого края мы нажали).
   А в событии mousemove для элемента html (именно для html, т.к. при перемещении курсор может быть в любой области страницы, даже за пределами таблицы) мы определяем x-координату курсора и задаём ширину левой колонки. В момент отпускания кнопки (опять-таки на элементе html) возвращает dragging в false. Вот и всё.
5. Нюансы по размерам: координату курсора мы получаем относительно страницы, поэтому нам нужно знать позицию таблицы на странице, её определяем через $(table).offset().left. Ширина левой колонки определяется как позиция курсора минус позиция таблицы минус смещение в сплиттере. Смещение в сплиттере необходимо для того, чтобы при работе он не дёргался на левый край. Ширина правой колонки определяется как ширина таблицы минус ширина левой колонки, минус ширина сплиттера. Собственно, ширину правой колонки узнаём только чтобы ограничить её минимальный размер (он задаётся через параметр minWidth для jQuery-плагина).
6. Начальный размер задаётся параметром startWidth (применяется только если это число больше нуля).

Вот, в общем-то, и все секреты.

Скачать пример (zip, 1.57 КБ)
Открыть пример (html, 4.58 КБ)

Автор: Денис

Дата публикации: 27.05.2022

Просмотров: 36

Комментарии

Я

09.03.2023 17:09:00

Недавно требовалось, но подобного не нашлось. Проверю, если что отпишусь

Михаил

19.10.2022 18:22:33

Спасибо! не думал что такой функционал может быть так просто реализован.

Категории блога:

• 1С-Битрикс 10
• Общее о создании сайтов 13
• HTML, CSS, JS, jQuery 2
• Без категории 9

В чем разница между методами jQuery HTML/CSS width(), innerWidth(), externalWidth() и externalWidth(ture)?

Прашант Венгурлекар 9 октября 2017 г. 10 октября 2017 г. jQuery 0

Последний раз этот пост обновлялся 10 октября 2017 г.

Определение:

width(): Этот метод дает ширину выбранного элемента (исключая отступы, границы и поля).

innerWidth(): Этот метод дает ширину выбранного элемента (включая отступы, исключая границы и поля).

externalWidth(): Этот метод дает ширину выбранного элемента (включая отступы и границы, исключая поля).

externalWidth(true): Этот метод дает ширину выбранного элемента (включая отступы, границы и поля).

HTML:

<дел> Размеры Div:
ширина = 300 пикселей
padding = 30 пикселей со всех сторон
граница = 5 пикселей со всех сторон
поле = 20px со всех сторон