outerWidth metode

Metode outerWidth ļauj iegūt un mainīt elementa platumu, ieskaitot iekšējās atkāpes, apmali un selektīvi - ārējās atkāpes. Svarīgi atcerēties, ka mēs iegūsim 'aprēķināto platumu' (computed width). Aprēķinu kļūdas var rasties arī, ja lietotājs maina lapas izmērus, kā arī, ja elements vai tā vecāks elements ir paslēpts.

Sintakse

Tā mēs varam iegūt elementa platumu. Šī metode var pieņemt neobligātu parametru true vai false (false ir pēc noklusējuma), atkarībā no tā - vai tiks ņemtas vērā ārējās atkāpes vai nē. Dažos gadījumos iegūtās vērtības var būt daļskaitļi:

$(selector).outerWidth([include_margin]);

Lai mainītu elementa platumu - var padot vienkārši skaitli (piemēram 400), tad mērvienība būs pikseļi, vai virkni ar mērvienības norādi (piemēram '10em'):

$(selector).outerWidth(new_value, [include_margin]);

Mēs varam arī pielietot doto funkciju katram elementam komplektā. Šajā gadījumā pirmais parametrs funkcijai sauksies elements komplektā, bet otrais parametrs - pašreizējā platuma vērtība konkrētajam elementam. this funkcijas iekšienē būs pašreizējais elements. Elementa platuma vērtība mainīsies uz to, ko atgriezīs funkcija:

$(selector).outerWidth(function(index, current_width));

Piemērs

Salīdzinājumam izvadīsim informāciju par rindkopas #test platumu, kas iegūts ar metodēm width, innerWidth un outerWidth:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let 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);

Skatiet arī

metode width,
kas ļauj iegūt un mainīt elementa platumu
metode innerWidth,
kas ļauj iegūt un mainīt elementa platumu, ņemot vērā tā iekšējās atkāpes