outerWidth ක්රමය
outerWidth ක්රමය මගින් මූලද්රව්යයක පළල එහි අභ්යන්තර පැතිරීම්, සීමාව සහ තෝරාගෙන - බාහිර පැතිරීම් සැලකිල්ලට ගනිමින් ලබා ගැනීම හෝ වෙනස් කිරීම සිදු කළ හැක. මතක තබා ගත යුත්තේ අප ලබා ගන්නේ පළලෙහි 'ගණනය කළ අගය' (computed width) බවයි. පිරිසිදු කිරීමේ දෝෂ ද ඇතිවිය හැක, පරිශීලකයා පිටුවේ ප්රමාණය වෙනස් කරන විට, සහ එසේම, මූලද්රව්යය හෝ එහි මාපියයා සඟවා ඇත්නම්.
වාක්ය රීතිය
මේ ආකාරයට අපට මූලද්රව්යයක පළල ලබා ගත හැක. මෙම ක්රමයට
ඇතුළත් කළ හැකි විකල්ප පරාමිතියක් ලෙස true
හෝ false (false පෙරනිමිය ලෙස පවතී),
බාහිර පැතිරීම් සැලකිල්ලට ගන්නා ද නැද්ද යන්න මත රඳා පවතී.
සමහර අවස්ථාවලදී
ලබා ගත් අගයන් භාගික විය හැක:
$(selector).outerWidth([include_margin]);
මූලද්රව්යයක පළල වෙනස් කිරීම සඳහා - සරලවම
අංකයක් (උදාහරණයක් ලෙස 400) යොදා ගත හැක, එවිට මිනුම්
ඒකක පික්සල් වේ, නැතහොත් විකල්පයක් ලෙස පේළියක්,
මිනුම් ඒකක සඳහන් කරමින් (උදාහරණයක් ලෙස
'10em'):
$(selector).outerWidth(new_value, [include_margin]);
එසේම අපට නියම කරන ලද ශ්රිතයක් සමූහය තුළ ඇති සෑම
මූලද්රව්යයකටම යොදා ගත හැක. මෙහිදී පළමු පරාමිතිය ලෙස ශ්රිතය
ලබා ගන්නේ සමූහය තුළ මූලද්රව්යයේ අන්කය, දෙවන පරාමිතිය
ලෙස - නිශ්චිත මූලද්රව්යය සඳහා නියම කර ඇති පළලෙහි
වත්මන් අගය. ශ්රිතය තුළ this
වත්මන් මූලද්රව්යයට යොමු වේ.
මූලද්රව්යයේ පළලෙහි අගය වෙනස් වන්නේ,
ශ්රිතය විසින් ආපසු දෙන අගයට ය:
$(selector).outerWidth(function(index, current_value));
උදාහරණය
සංසන්දනය කිරීම සඳහා
ඡේදයේ පළල පිළිබඳ තොරතුරු #test, ක්රම මගින් ලබා ගත්
width,
innerWidth සහ
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);
මේවාත් බලන්න
-
widthක්රමය,
මූලද්රව්යයක පළල ලබා ගැනීම සහ වෙනස් කිරීම සිදු කරයි -
innerWidthක්රමය,
මූලද්රව්යයක පළල ලබා ගැනීම සහ වෙනස් කිරීම සිදු කරයි, එහි අභ්යන්තර පැතිරීම් සැලකිල්ලට ගනිමින්
