Методи innerWidth и innerHeight во jQuery
Со помош на методите innerWidth и
innerHeight ја добиваме ширината и висината
на елементите, но веќе земајќи ги предвид не само содржината, туку
и внатрешните отстапувања - padding.
Да ги добиеме вредностите за ширина и висина на параграфот
#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 можеме
да ги промениме вредностите за ширина и висина на елементите.
На пример, ајде да поставиме ширина на дивот #test1
еднаква на 250px, а висина на #test2 - 200px:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Дополнете го решението на првата задача - испишете
во вториот параграф под дивот #wrapper
вредностите за ширина и висина на дивот #wrapper,
овој пат земајќи ги предвид внатрешните отстапувања, но без
да ги земате предвид границите и надворешните отстапувања.
