Метод width

Метод width омогућава добијање и мењање ширине елемента. Важно је запамтити да ћемо добијати 'израчунату вредност' ширине (computed width). За разлику од методе css('width'), он враћа величину без јединице (на пример 400) и погодан је за математичке прорачуне. Метод добија ширину садржаја елемента, независно од наведеног CSS-својства box-sizing. Да би се избегле незгоде повезане са тим, препоручује се коришћење css('width'). Грешке у прорачуну могу такође настати ако корисник мења величине странице, као и ако је елемент или његов родитељ сакривен. Вредност ширине не узима у обзир вредности унутрашњих одступања и ивице.

Синтакса

Добити ширину елемента. У неким случајевима добијене вредности могу бити разломљене:

javascript$(селектор).width();

Да би се променила ширина елемента - може се проследити једноставно број (на пример 400), тада ће јединица мере бити пиксели, или стринг, са назнаком јединице мере (на пример '10em'):

javascript$(селектор).width(нова вредност);

Такође можемо применити задату функцију на сваки елемент у скупу. При томе ће први параметар функција добити редни број елемента у скупу, а други параметар - тренутну вредност задате ширине за конкретни елемент. Вредност this унутар функције ће указивати на тренутни елемент. Вредност ширине елемента ће се променити у ону, коју функција врати:

javascript$(селектор).width(function(редни број у скупу, тренутна вредност ширине));

Пример

Хајде да при клику на div променимо њему ширину на вредност 40px, користећи метод width, а такође помоћу css променимо његову позадину у зелену:

html<div id="test"></div>

css#test {
  width: 90px; 
  height: 80px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).width(40).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

Погледајте такође