jQuery හි innerWidth සහ innerHeight ක්‍රම

innerWidth සහ innerHeight ක්‍රම භාවිතයෙන් අපට මූලද්‍රව්‍යවල පළල සහ උස ලබා ගත හැකිය, නමුත් අන්තර්ගතය පමණක් නොව, අභ්‍යන්තර පැතිරීම් - padding ද සැලකිල්ලට ගනිමින්.

අපි now #test ඡේදයේ පළල සහ උස අගයන් ලබා ගනිමු, නමුත් මෙවර innerWidth සහ innerHeight භාවිතයෙන්, සහ ඒවා වෙනත් ඡේදයකට ප්‍රතිදානය කරමු. අපට ඡේද දෙකක් ඇතැයි සිතමු:

html<p id="test">text</p>
<p id="out"></p>

CSS මෙසේ දිස්වේ:

cssp {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Javascript හි අපි පහත කේතය ලියන්නෙමු:

javascriptlet w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

ඔබට පෙනෙන පරිදි, අගයන් දැන් 10px කින් වෙනස් වේ, මන්ද අභ්‍යන්තර පැතිරීම් සැලකිල්ලට ගනී, එය අපගේ නඩුවේ සෑම පැත්තකින්ම 5px වේ.

එසේම, innerWidth සහ innerHeight ක්‍රම භාවිතයෙන් අපට මූලද්‍රව්‍යවල පළල සහ උස අගයන් වෙනස් කළ හැකිය. උදාහරණයක් ලෙස, අපි now #test1 ඩිව් එකේ පළල 250px ට සමාන කරමු, සහ #test2 හි උස - 200px ට:

javascript$('#test1').innerWidth(250);
$('#test2').innerHeight(200);