jQuery හි outerWidth සහ outerHeight ක්රම
අවසාන ක්රම යුගලය වන්නේ outerWidth සහ
outerHeight වන අතර, ඒවා භාවිතයෙන් මූලද්රව්යයක පළල සහ උස සියලුම පැදිරිම් සහ මායිම් සැලකිල්ලට ගනිමින් ලබා ගත හැකිය,
හෝ බාහිර පැදිරිම් margin සැලකිල්ලට නොගත හැකිය.
අපි උදාහරණයක් සලකා බලමු. අපට ඡේදයක් ඇතැයි සිතමු:
<p id="test">text</p>
<p id="out"></p>
CSS පහත පරිදි දිස්වේ:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
අපි #test ඡේදයේ පළල හා උස අගයන් ලබා ගනිමු,
අභ්යන්තර පැදිරිම් සහ මායිම් සැලකිල්ලට ගනිමින්,
මේ සඳහා මෙම ක්රමවලට false පැවරිය යුතුය
හෝ වරහන් හිස්ව තබන්න (මන්ද එය ක්රමයේ පෙරනිමිය ලෙස දැනටමත් පවතී):
let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
දැන් අපගේ අගයන් 4px කින් වෙනස් වනු ඇත,
මන්ද එක් එක් පැත්තෙන් මායිම් වල thickness 2px වේ.
දැන් අපි #test ඡේදයේ පළල හා උස අගයන් ලබා ගනිමු,
සියලුම පැදිරිම් සහ මායිම් සැලකිල්ලට ගනිමින්,
මේ සඳහා outerWidth සහ outerHeight ක්රමවලට
true පැවරිය යුතුය:
let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);
දැන් අපගේ අගයන් පෙර ඒවාට වඩා 20px කින් වෙනස් වනු ඇත,
මන්ද අපගේ බාහිර පැදිරිම් එක් එක් පැත්තෙන් 10px වේ.
පෙර කාර්ය වල විසඳුම් පුරවන්න - #wrapper div යටතේ තුන්වන ඡේදයට
#wrapper div හි පළල හා උස අගයන් ප්රතිදානය කරන්න -
අභ්යන්තර පැදිරිම් සහ මායිම් සැලකිල්ලට ගනිමින්, නමුත්
බාහිර පැදිරිම් නොමැතිව. හතරවන ඡේදයට පළල හා උස අගයන් ප්රතිදානය කරන්න
#wrapper div හි
සියලුම පැදිරිම් සහ මායිම් සැලකිල්ලට ගනිමින්.
එසේම outerWidth සහ
outerHeight ක්රම භාවිතයෙන් අපට
මූලද්රව්යවල පළල සහ උස අගයන් වෙනස් කළ හැකිය.
උදාහරණයක් ලෙස, අපි #test1 div හි පළල
250px ට සමාන කරමු, සහ #test2 හි උස - 200px ට:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
මූලද්රව්යයක්ගේ මානයන් සමඟ වැඩ කිරීම සඳහා සඳහන් කර ඇති සියලුම ක්රම කට්ටලයක ඇති එක් එක් මූලද්රව්යයට ශ්රිතය යෙදීමේ හැකියාවද සපයයි.
