outerHeight ක්රමය
outerHeight ක්රමය මඟින් මූලද්රව්යයක අභ්යන්තර අතර පරතරයන්, මායිම සහ තේරීම් අනුව - බාහිර අතර පරතරයන් සැලකිල්ලට ගනිමින් උස ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ දෙයි. අපි 'ගණනය කළ අගය' උස (computed height) ලබා ගන්නා බව මතක තබා ගැනීම වැදගත්ය. පරිශීලකයා පිටුවේ ප්රමාණ වෙනස් කරන්නේ නම්, සහ මූලද්රව්යය හෝ එහි මාපිය මූලද්රව්යය සැඟවුනේ නම්, ගණනය කිරීමේ දෝෂ ද ඇතිවිය හැකිය.
වාක්ය රීතිය
මේ ආකාරයට අපට මූලද්රව්යයේ උස ලබා ගත හැකිය. මෙම ක්රමයට
true හෝ false (false අපේක්ෂිත ලෙස පවතී)
යන විකල්ප පරාමිතියක් ලබා ගත හැකිය,
බාහිර අතර පරතරයන් සැලකිල්ලට ගන්නේ ද නැද්ද යන්න අනුව.
සමහර අවස්ථාවලදී
ලබාගත් අගයන් භාගික විය හැකිය:
$(තෝරන්නා).outerWidth([margin_ඇතුළුව]);
මූලද්රව්යයේ උස වෙනස් කිරීමට - සරලව අංකයක්
(උදාහරණයක් ලෙස 400) යැවිය හැකිය, එවිට මැනීමේ
ඒකකය පික්සල් වේ, නැතහොත් අගයක් සහිත ස්ත්රීංගයක්,
මැනීමේ ඒකකය සඳහන් කරමින් (උදාහරණයක් ලෙස
'10em'):
$(තෝරන්නා).outerHeight(නව අගය, [margin_ඇතුළුව]);
එසේම අපට නිශ්චිත ශ්රිතයක් කට්ටලයේ ඇති සෑම
මූලද්රව්යයකටම යොදා ගත හැකිය. මේ අතරතුර පළමු පරාමිතිය ලෙස ශ්රිතය
කට්ටලය තුළ මූලද්රව්යයේ අංකය ලබා ගනී, දෙවන පරාමිතිය ලෙස
- නිශ්චිත මූලද්රව්යය සඳහා වත්මන් උසෙහි අගය.
ශ්රිතය තුළ this
වත්මන් මූලද්රව්යය වෙත යොමු කරයි.
මූලද්රව්යයේ උසෙහි අගය එය වෙනස් වන්නේ,
ශ්රිතය ආපසු ලබා දෙන අගයට:
$(තෝරන්නා).outerHeight(function(කට්ටලය තුළ අංකය, උසෙහි වත්මන් අගය));
උදාහරණය
සසඳනු වස් අපි
#test ඡේදයේ උස පිළිබඳ තොරතුරු ප්රතිදානය කරමු,
height,
innerHeight සහ
outerHeight ක්රම මගින් ලබාගත්:
<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 h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);
$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);
මෙයද බලන්න
-
heightක්රමය,
මූලද්රව්යයක උස ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ දෙයි -
innerHeightක්රමය,
මූලද්රව්යයක අභ්යන්තර අතර පරතරයන් සැලකිල්ලට ගනිමින් උස ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ දෙයි
