jQuery හි innerWidth සහ innerHeight ක්රම
innerWidth සහ
innerHeight ක්රම භාවිතයෙන් අපට මූලද්රව්යවල පළල සහ උස ලබා ගත හැකිය,
නමුත් අන්තර්ගතය පමණක් නොව,
අභ්යන්තර පැතිරීම් - padding ද සැලකිල්ලට ගනිමින්.
අපි now #test ඡේදයේ පළල සහ උස අගයන් ලබා ගනිමු,
නමුත් මෙවර innerWidth සහ
innerHeight භාවිතයෙන්, සහ ඒවා වෙනත් ඡේදයකට ප්රතිදානය කරමු. අපට
ඡේද දෙකක් ඇතැයි සිතමු:
<p id="test">text</p>
<p id="out"></p>
CSS මෙසේ දිස්වේ:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Javascript හි අපි පහත කේතය ලියන්නෙමු:
let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
ඔබට පෙනෙන පරිදි, අගයන් දැන් 10px කින් වෙනස් වේ,
මන්ද අභ්යන්තර පැතිරීම් සැලකිල්ලට ගනී,
එය අපගේ නඩුවේ සෑම පැත්තකින්ම 5px වේ.
එසේම, innerWidth සහ
innerHeight ක්රම භාවිතයෙන් අපට
මූලද්රව්යවල පළල සහ උස අගයන් වෙනස් කළ හැකිය.
උදාහරණයක් ලෙස, අපි now #test1 ඩිව් එකේ පළල
250px ට සමාන කරමු, සහ #test2 හි උස - 200px ට:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
පළමු කාර්යයට විසඳුම සම්පූර්ණ කරන්න - ඩිව් එක යටතේ දෙවන ඡේදයට
#wrapper ඩිව් එකේ පළල සහ උස අගයන් ප්රතිදානය කරන්න,
මෙවර අභ්යන්තර පැතිරීම් සැලකිල්ලට ගනිමින්, නමුත්
s borders and external margins.
