outerWidth մեթոդը

outerWidth մեթոդը թույլ է տալիս ստանալ և փոխել տարրի լայնությունը՝ հաշվի առնելով ներքին տարածությունները, եզրագիծը և ընտրովի՝ արտաքին տարածությունները տարրի: Կարևոր է հիշել, որ մենք կստանանք 'հաշվարկված արժեք' լայնության (computed width): Հաշվարկման սխալները կարող են նաև առաջանալ, եթե օգտատերը փոխում է էջի չափերը, և նաև, եթե տարրը կամ նրա ծնող թաքնված են:

Շարահյուսություն

Այսպես մենք կարող ենք ստանալ տարրի լայնությունը: Այս մեթոդը կարող է ընդունել ոչ պարտադիր պարամետր true կամ false տեսքով (false-ը լռելյայն է), կախված նրանից՝ արտաքին տարածությունները կհաշվի առնվեն, թե ոչ: Որոշ դեպքերում ստացված արժեքները կարող են լինել կոտորակային:

javascript$(ընտրիչ).outerWidth([ներառելով_margin]);

Տարրի լայնությունը փոխելու համար՝ կարելի է փոխանցել պարզապես թիվ (օրինակ 400), ապա միավորները կլինեն պիքսելներ, կամ տող, միավորների նշումով (օրինակ '10em'):

javascript$(ընտրիչ).outerWidth(նոր արժեք, [ներառելով_margin]);

Նաև մենք կարող ենք կիրառել նշված ֆունկցիան յուրաքանչյուր տարրի համար հավաքածուում: Այս դեպքում առաջին պարամետրով ֆունկցիան կստանա տարրի համարը հավաքածուում, իսկ երկրորդ պարամետրով - ընթացիկ արժեքը նշված լայնության համար կոնկրետ տարրի: this-ը ֆունկցիայի ներսում կլինի ընթացիկ տարրին ցույց տվող: Տարրի լայնության արժեքը կփոխվի դրանով, որը կվերադարձնի ֆունկցիան:

javascript$(ընտրիչ).outerWidth(function(համարը հավաքածուում, ընթացիկ արժեքը լայնության));

Օրինակ

Եկեք համեմատության համար արտածենք տեղեկատվությունը #test պարբերության լայնության մասին, ստացված մեթոդներով width, innerWidth և outerWidth:

html<p id="test">տեքստ</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Տես նաև