.width()

Получение текущей вычисленной ширины для первого элемента в наборе совпадающих элементов или установка ширины каждого совпадающего элемента.

Содержание:

.width()
- .width()
.width( значение )
- .width( значение )
- .width( функция )

.width()Возвращает: Число

Описание: Получение текущей вычисленной ширины для первого элемента в наборе совпадающих элементов.

версия добавлена: 1.0.width()
- Этот метод не принимает аргументов.

Разница между .css( "width" ) и .width() заключается в том, что последний возвращает значение ширины в пикселях без единиц измерения (например, 400) , а первый возвращает значение с единицами измерения (например, 400px). Метод .width() рекомендуется, когда ширина элемента требуется для математических вычислений.

Рисунок 1 - Иллюстрация измеренной ширины

Этот метод также может определять ширину окна и документа.

// Returns width of browser viewport
$( window ).width();
 
// Returns width of HTML document
$( document ).width();

Обратите внимание, что .width() всегда возвращает ширину содержимого, независимо от значения свойства CSS box-sizing. Начиная с jQuery 1.8, это может потребовать извлечения ширины CSS плюс свойства box-sizing , а затем вычитания потенциальных границ и отступов для каждого элемента, когда элемент имеет box-sizing: border-box. Чтобы избежать этой накладной, используйте .css( "width" ), а не .width().

Примечание: Хотя теги style и script будут сообщать значение для .width() или height() при абсолютном позиционировании и заданных display:block, настоятельно не рекомендуется вызывать эти методы для этих тегов. Помимо того, что это плохая практика, результаты также могут оказаться ненадежными.

Дополнительные замечания:

Число, возвращаемое API, связанными с размерами, включая .width(), в некоторых случаях может быть дробным. Код не должен предполагать, что это целое число. Кроме того, размеры могут быть некорректными, когда пользователь увеличивает масштаб страницы; браузеры не предоставляют API для обнаружения этого состояния.
Значение, сообщенное .width(), не гарантируется как точное, когда элемент или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент виден перед использованием .width(). jQuery попытается временно отобразить, а затем снова скрыть элемент, чтобы измерить его размеры, но это ненадежно и (даже когда точно) может значительно повлиять на производительность страницы. Эта функция измерения с отображением и скрытием может быть удалена в будущих версиях jQuery.

Пример:

Показать различные ширины. Обратите внимание, что значения взяты из iframe, поэтому они могут быть меньше, чем вы ожидали. Желтое выделение показывает тело iframe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div>&nbsp;</div>
<p>
  Sample paragraph to test width
</p>
 
<script>
function showWidth( ele, w ) {
  $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
}
$( "#getp" ).on( "click", function() {
  showWidth( "paragraph", $( "p" ).width() );
} );
$( "#getd" ).on( "click", function() {
  showWidth( "document", $( document ).width() );
} );
$("#getw").on( "click", function() {
  showWidth( "window", $( window ).width() );
} );
</script>
 
</body>
</html>

Демо:

.width( значение )Возвращает: jQuery

Описание: Установка CSS ширины каждого элемента в наборе совпадающих элементов.

версия добавлена: 1.0.width( значение )
- значение
  
  Тип: Строка или Число
  
  Целое число, представляющее количество пикселей, или целое число с необязательной единицей измерения (как строка).
версия добавлена: 1.4.1.width( функция )
- функция
  
  Тип: Функция( Целое число индекс, Целое число значение ) => Строка или Число
  
  Функция, возвращающая ширину для установки. Получает индексную позицию элемента в наборе и старую ширину в качестве аргументов. Внутри функции, this ссылается на текущий элемент в наборе.

При вызове .width("value"), значение может быть строкой (число и единица измерения) или числом. Если для значения предоставлено только число, jQuery предполагает единицу измерения в пикселях. Однако, если предоставлена строка, для ширины можно использовать любые допустимые единицы измерения CSS (например, 100px, 50%, или auto). Обратите внимание, что в современных браузерах свойство CSS width не включает отступы, границы или отступы, если не используется свойство CSS box-sizing.

Если явных единиц измерения не указано (например, "em" или "%"), то предполагается "px".

Обратите внимание, что .width("value") устанавливает ширину содержимого блока независимо от значения свойства CSS box-sizing.

Пример:

Изменение ширины каждого div при первом клике (и изменение его цвета).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
</script>
 
</body>
</html>

Содержание:

.width()Возвращает: Число

версия добавлена: 1.0.width()

Дополнительные замечания:

Пример:

Демо:

.width( значение )Возвращает: jQuery

версия добавлена: 1.0.width( значение )

версия добавлена: 1.4.1.width( функция )

Пример:

Демо: