Метод 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'
  });
});

Шунингдек қаранг