height ක්රමය
height ක්රමය අංගයක උස ලබා ගැනීමට
හා වෙනස් කිරීමට ඉඩ සලසයි. මතක තබා ගත යුතු වැදගත් කරුණක් නම්,
අපට ලැබෙන්නේ 'ගණනය කළ අගය'
(computed height) වීමයි.
css('height') ක්රමයට වඩා වෙනස්ව,
එය මාන රහිත අගයක් ආපසු ලබා දේ (උදාහරණයක් ලෙස 400)
සහ ගණිතමය ගණනය කිරීම් සඳහා පහසු වේ.
මෙම ක්රමය අංගයේ අන්තර්ගතයේ උස ලබා ගනී, මෙය
CSS ගුණය වන
box-sizing
පෙන්වා දීමෙන් ස්වායත්ත වේ.
අනවශ්ය ගණනය කිරීම් වළක්වා ගැනීම සඳහා,
css('height') භාවිතා කිරීම නිර්දේශ කෙරේ.
ගණනය කිරීමේ දෝෂ ද ඇති විය හැකිය,
පරිශීලකයා පිටුවේ ප්රමාණය වෙනස් කරන විට හෝ,
අංගය හෝ එහි මූලික අංගය සැඟවී ඇති විට.
උසෙහි අගය
අතර ඇති හිස් තැන් හා මායිම් සැලකිල්ලට නොගනී.
වාක්ය රචනය
අංගයක උස ලබා ගැනීම. සමහර අවස්ථාවලදී ලබා ගත් අගයන් භාගික විය හැකිය:
$(තෝරන්නා).height();
අංගයක උස වෙනස් කිරීමට - සරලව අංකයක් ලබා දිය හැකිය
(උදාහරණයක් ලෙස 400), එවිට මැනීමේ ඒකකය
පික්සෙල් වනු ඇත, නැතහොත් පේළියක්,
මැනීමේ ඒකකය දක්වා (උදාහරණයක් ලෙස
'10em'):
$(තෝරන්නා).height(අලුත් අගය);
අපට නියම කළ ශ්රිතයක් සමූහයේ ඇති සෑම අංගයකටම
යොදා ගත හැකිය. මෙමගින් පළමු පරාමිතිය ලෙස ශ්රිතයට
සමූහය තුළ ඇති අංගයේ අංකය ලැබෙන අතර, දෙවන පරාමිතිය ලෙස
- නිශ්චිත අංගය සඳහා නියම කළ උසෙහි වත්මන් අගය ලැබේ.
this ශ්රිතය තුළ
වත්මන් අංගයට යොමු කරයි.
අංගයේ උසෙහි අගය වෙනස් වන්නේ, ශ්රිතය මගින් ලබා දෙන අගයට ය:
$(තෝරන්නා).height(function(සමූහයේ අංකය, උසෙහි වත්මන් අගය));
උදාහරණය
අපි #test මත ක්ලික් කළ විට එහි
උස 30px අගයට වෙනස් කරමු, මෙය සිදු කිරීමට
height ක්රමය භාවිතා කරමු, සහ css
භාවිතා කරමු එහි පසුබිම කොළ පාටට වෙනස් කිරීමට:
<div id="test"></div>
#test {
width: 50px;
height: 90px;
background: red;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('#test').one('click', function() {
$(this).height(30).css({
cursor: 'auto',
backgroundColor: 'green'
});
});
මේවාත් බලන්න
-
widthක්රමය,
එය අංගයක පළල ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ සලසයි -
innerHeightක්රමය,
එය අංගයක උස ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ සලසයි, එහි අභ්යන්තර ඇති හිස් තැන් සැලකිල්ලට ගනිමින් -
outerHeightක්රමය,
එය අංගයක උස ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ සලසයි, එහි ඇති හිස් තැන් හා මායිම සැලකිල්ලට ගනිමින් -
cssක්රමය,
එය අංගයේ CSS විලාසිතා ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ සලසයි
