Работа с шириной элемента

Материал из JQuery

Перейти к: навигация, поиск
.width()  .innerWidth()  .outerWidth()

Функции возвращают ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины. Имеется несколько вариантов использования функций:

.width() .innerWidth() .outerWidth([includeMargin]):integer1.0

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

width() — ширина элемента без учета отступов и толщины рамки.
innerWidth() — ширина элемента с учетом размера внутренних отступов (padding).
outerWidth(includeMargin) — ширина элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin). File:Width.png


.width(value):jQuery1.0
устанавливает новое значение ширины равное value, для всех выбранных элементов
.width(function(index, value)):jQuery1.4
устанавливает новое значение ширины элементов, равное значению, которое вернет пользовательская функция. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение ширины элемента.

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

$("div.content").width() возвратит ширину первого div-элемента с классом 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~

Результат:
Image:Pict56.png

Ссылки

Поисковые ключи:
  • ширина элементов на странице
  • установить ширину
  • изменить ширину элемента
  • установить ширину элемента
  • присвоить значение ширине элемента
  • .width()
  • width()

Поисковые ключи:
  • внутренняя ширина элемента
  • .innerWidth()
  • innerWidth()
Поисковые ключи:
  • внешняя ширина элемента
  • .outerWidth()
  • outerWidth()