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'
  });
});

Տես նաև