jQuery метод .width()

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

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

Наглядное отображение использования jQuery метода .width().

jQuery метод .width() также сможете найти ширину окна, или документа:

JavaScript

$( document ).width() // возвращает ширину HTML документа

$( window ).width() // возвращает ширину области просмотра браузера

jQuery метод .width() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.

Метод с версии jQuery 1.8 вычисляет и возвращает ширину элемента независимо от того какая модель вычисления ширины и высоты используется (content-box, или border-box свойства box-sizing). То есть метод будет вычитать границы и внутренние отступы. Если Вас это не устраивает, то используйте метод .css( "width" ). Пример сравнения двух моделей и этих методов представлен ниже.

jQuery синтаксис:

Возвращение значений:

Синтаксис 1.0:

JavaScript

$( selector ).width() // метод используется без параметров

Установка значений:

Синтаксис 1.0:

JavaScript

$( selector ).width( value )

value - String (значение в произвольных единицах измерения), или Integer (значение в пикселях)

Синтаксис 1.4.1:

Код

$( selector ).width(function( index, currentValue ))

index - Integer

currentValue - Integer.

Добавлен в версии jQuery

1.0 (синтаксис обновлен в 1.4.1)

Значения параметров

Параметр Описание

value Параметр определяет значение ширины, которое будет установлено. Допускается указывать любые единицы измерения CSS, либо указывать только числовое значение без единиц измерения, в этом случае значение будет установлено в пикселях.

function(index, currentValue) Определяет функцию, которая возвращает новое значение ширины, которое будет установлено выбранным элементам. Внутри функции this ссылается на текущий элемент в наборе.
index - возвращает индекс элемента в наборе.
currentValue - текущее значение ширины элемента.

Параметр	Описание
value	Параметр определяет значение ширины, которое будет установлено. Допускается указывать любые единицы измерения CSS, либо указывать только числовое значение без единиц измерения, в этом случае значение будет установлено в пикселях.
`function`(index, currentValue)	Определяет функцию, которая возвращает новое значение ширины, которое будет установлено выбранным элементам. Внутри функции `this` ссылается на текущий элемент в наборе. index - возвращает индекс элемента в наборе. currentValue - текущее значение ширины элемента.

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

Метод .width() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p style="width: 10em">Обычный абзац</p>
<p style="width: 10em">Второй обычный абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('p').css('width')) // используя метод .css() возвращаем и выводим в консоль браузера значение ширины первого элемента <p>
        console.log($('p').width()) // используя метод .width() возвращаем и выводим в консоль браузера значение ширины первого элемента <p>
        console.log($(document).width()) // возвращает и выводит в консоль браузера  ширину HTML документа
        console.log($(window).width()) // возвращает и выводит в консоль браузера  ширину области просмотра браузера
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы при нажатии на кнопку:

с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение ширины первого элемента .
с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины первого элемента , ширину HTML документа и значение ширины области просмотра браузера.

Рассмотрим следующий пример в котором мы рассмотрим отличие метода .width() от метода .css() при использовании моделей вычисления ширины и высоты элементов content-box и border-box:

Метод .width() — пример 2

index.html

HTML

<button>Клик</button>
<p class="test1">Обычный абзац</p>
<p class="test2">Обычный абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        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
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

.test1 {
  box-sizing: content-box; /* модель по умолчанию (включает в себя только содержание элемента) */
  width: 200px; /* ширина элемента */
  padding: 10px; /* внешние отступы со всех сторон */
  border: 10px solid green; /* сплошная граница зеленого цвета размером 10 пикселей */
}
.test2 {
  box-sizing: border-box; /* модель border-box (включает в себя содержание элемента, границы и внутренние отступы) */
  width: 200px; /* ширина элемента */
  padding: 10px; /* внешние отступы со всех сторон */
  border: 10px solid green; /* сплошная граница зеленого цвета размером 10 пикселей */
}

В этом примере мы при нажатии на кнопку:

с использованием jQuery метода .css() возвращаем и выводим в консоль браузера значение ширины элемента  с классом test1 и test2. Обратите внимание независимо от того какую модель используют элементы результат вывода будет один.
с использованием jQuery метода .width() возвращаем и выводим в консоль браузера значение ширины элемента  с классом test1 и test2. Обратите внимание, что во втором случае, где элемент  использует модель border-box, значение вывода не включает в себя как границы элемента, так и внутренние отступы. В этом заключается отличие этого метода от метода .css() при использовании метода border-box.

Рассмотрим следующий пример в котором с помощью метода .width() мы будем устанавливать значения ширины, а не возвращать.

Метод .width() — пример 3

index.html

HTML

<button>Клик</button>
<p class="test1">Обычный абзац</p>
<p class="test1">Обычный абзац</p>
<p class="test2">Обычный абзац</p>
<p class="test2">Обычный абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('.test1').width(150) // устанавливаем ширину элементам с классом test1 в пикселях
        $('.test2').width('35%') // устанавливаем ширину элементам с классом test2 в процентах
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

p {
  background-color: orange; /* устанавливаем цвет заднего фона */
}

В этом примере мы при нажатии на кнопку с использованием jQuery метода .width() устанавливаем значение ширины элементам  с классом test1 равную 150 пикселей, а элементам с классом test2 значение ширины равную 35% от родительского элемента.

Рассмотрим следующий пример в котором в качестве параметра метода .width() мы передадим функцию.

Пример использования jQuery метода .width() (функция в качестве параметра)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<div class="test1"></div>
<div class="test2"></div>

main.js

JavaScript

$(document).ready(function () {
    $('div').click(function () {
        $(this).width(function (index, currentValue) {
            return currentValue - 50
        })
    })
})

style.css

CSS

div {
    background-color: yellow;
    height: 50px;
    margin-bottom: 20px;
}

В этом примере мы в качестве параметра метода .width() передаем функцию, которая возвращает и устанавливает новое значение ширины элемента <div> по которому произведен клик. В нашем случае новая ширина элемента высчитывается как текущая ширина элемента минус 50 пикселей.

Рассмотрим следующий пример в котором с помощью метода .resize() и метода .width() будем отслеживать ширину области просмотра браузера и при её изменении устанавливать определённый цвет заднего фона.

Метод .width() — пример 5

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<h1>Try to resize window</h1>

main.js

JavaScript

$(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') // устанавливаем цвет заднего фона синий
        }
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с помощью метода .resize() и метода .width() мы отслеживаем ширину области просмотра браузера и при её изменении устанавливаем определённый цвет заднего фона элементу <body>. Если ширина области просмотра меньше 1000 пикселей и больше 800 пикселей, то цвет заднего фона будет установлен желтый. Если ширина области просмотра меньше 800 пикселей и больше 600 пикселей, то цвет заднего фона будет установлен зеленый, в других случаях цвет заднего фона будет установлен как синий.

Обратите внимание, что при загрузке страницы цвет будет белый, так как функция запуститься только при изменении размеров окна (jQuery метод .resize()).