Object dimensies

jQuery kent enkele handige methodes om de afmetingen van een object op te vragen en zijn positie binnen de pagina te bepalen.

★ Open dom/dimensies.html en bekijk de broncode. ★ Test de pagina in een browser.

De acht laatste getallen zijn verschillend op Mac en op Windows. Beide sytemen gebruiken immers een verschillend lettertype! Bovenstaande afbeelding toont de Windows-dimensies.

<style type="text/css">
#sect1 {
    width: 300px; 
    float:left;
    border: solid 4px lightGrey; 
    padding: 10px;
    margin: 5px 5px 10px 5px; 
    cursor: text;
}
...
</style>

$('#sect1').on('mouseleave keyup', function(){ 
     toonEigenschappen();
});
$('#sect1').mouseleave();
$('#width').click(function() {
    $('#sect1').width('400px'); 
    toonEigenschappen();
});
$('#innerWidth').click(function() {
    $('#sect1').innerWidth('400px'); 
    toonEigenschappen();
});
$('#outerWidth').click(function() {
    $('#sect1').outerWidth('400px'); 
    toonEigenschappen();
});
$('#outerWidthTrue').click(function() {
    $('#sect1').outerWidth('400px', true); 
    toonEigenschappen();
});
$('#height').click(function() {
    $('#sect1').height('400px').css('overflow', 'auto'); 
    toonEigenschappen();
});
$('#offset').click(function() {
    $('#sect1').offset({top:150, left:30}); 
    toonEigenschappen();
});
function toonEigenschappen(){ 
    sec = $('#sect1');
    eigenschappen = 'width(): '+sec.width()+'<br>'; 
    eigenschappen += 'innerWidth(): '+ sec.innerWidth() + '<br>';
    eigenschappen += 'outerWidth(): '+ sec.outerWidth() + '<br><br>'; 
    eigenschappen += 'outerWidth(true): '+ sec.outerWidth(true) + '<br>'; 
    eigenschappen += 'height(): '+ sec.height() + '<br>';
    eigenschappen += 'innerHeight(): '+ sec.innerHeight() + '<br>'; 
    eigenschappen += 'outerHeight(): '+ sec.outerHeight() + '<br>'; 
    eigenschappen += 'outerHeight(true):'+ sec.outerHeight(true) + '<br>'; 
    eigenschappen += 'offset().left: '+ sec.offset().left + '<br>'; 
    eigenschappen += 'offset().top : '+ sec.offset().top + '<br>'; 
    eigenschappen += 'position().left: '+ sec.position().left + '<br>'; 
    eigenschappen += 'position().top: '+ sec.position().top +'<br>';
    $('#sect1 p:first').html(eigenschappen);
}

Zowel de breedte als de hoogte van een element kunnen we bepalen aan de hand van vier methodes. Voor de breedte zijn dit:

• width(): de breedte van de box (500px).

• innerWidth(): breedte + padding (500px + 2x10px = 520px).

• outerWidth(): breedte + padding + rand (520px + 2x4px = 528px).

• outerWidth(true): breedte + padding + rand + margin (528px + 2x5px = 538px).

De positie van de linkerbovenhoek van een object kunnen we als volgt bepalen:

• offset().left en offset().top geven respectievelijk de X- en Y-coördinaat van het object ten opzichte van de body-tag.

• position().left en position().top geven de X- en Y-coördinaat ten opzichte van het dichtstbijzijnde parent element dat ZELF gepositioneerd staat.

  In ons voorbeeld geeft position() de afstand ten opzichte van de body-tag.

★ Voeg aan het document volgende stijlregel toe: main {position:relative;} ★ Klik op de offset knop.

U zal merken dat de waardes voor offset() niet wijzigen. De waardes voor position() worden nu herrekend naar de main-tag.

Enkel width(), height() en offset() kennen een setter-functie.