jQuery Afmetingen

Met jQuery is het gemakkelijk om de afmetingen van elementen en browservensters te behandelen.

jQuery Afmeting Methoden

jQuery biedt meerdere belangrijke methoden voor het behandelen van afmetingen:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery width() en height() methoden

De methode width() stelt in of retourneert de breedte van het element (exclusief inbeslagneming, rand of marge).

De methode height() stelt in of retourneert de hoogte van het element (exclusief inbeslagneming, rand of marge).

Het volgende voorbeeld retourneert de breedte en hoogte van het opgegeven <div>-element:

Voorbeeld

$("button").click(function(){
  var txt="";
  txt += "Breedte: " + $("#div1").width() + "</br>";
  txt += "Hoogte: " + $("#div1").height();
  $("#div1").html(txt);
});

Probeer het zelf

jQuery innerWidth() en innerHeight() methoden

De methode innerWidth() retourneert de breedte van het element (inclusief inbeslagneming).

De methode innerHeight() retourneert de hoogte van het element (inclusief inbeslagneming).

Het volgende voorbeeld retourneert de binnengrootte van de opgegeven <div>-element:

Voorbeeld

$("button").click(function(){
  var txt="";
  txt += "Binnenbreedte: " + $("#div1").innerWidth() + "</br>";
  txt += "Binnenhoogte: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Probeer het zelf

jQuery outerWidth() en outerHeight() methoden

De outerWidth() methode retourneert de breedte van het element (inclusief binnenste marges en randen).

De outerHeight() methode retourneert de hoogte van het element (inclusief binnenste marges en randen).

Hieronder wordt een voorbeeld gegeven van het retourneren van de outer-width/height van een specifieke <div>-element:

Voorbeeld

$("button").click(function(){
  var txt="";
  txt+= "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+= "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

Probeer het zelf

De outerWidth(true) methode retourneert de breedte van het element (inclusief binnenste marges, randen en marges).

De outerHeight(true) methode retourneert de hoogte van het element (inclusief binnenste marges, randen en marges).

Voorbeeld

$("button").click(function(){
  var txt="";
  txt+= "Outer width (+marge): " + $("#div1").outerWidth(true) + "</br>";
  txt+= "Outer height (+marge): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Probeer het zelf

jQuery - Meer width() en height()

Hieronder wordt een voorbeeld gegeven van het retourneren van de breedte en hoogte van het document (HTML-document) en het venster (browser viewport):

Voorbeeld

$("button").click(function(){
  var txt="";
  txt+= "Document width/height: " + $(document).width();
  txt+= "x" + $(document).height() + "\n";
  txt+= "Window width/height: " + $(window).width();
  txt+= "x" + $(window).height();
  alert(txt);
});

Probeer het zelf

Hieronder wordt een voorbeeld gegeven van het instellen van de breedte en hoogte van een specifieke <div>-element:

Voorbeeld

$("button").click(function(){
  $("#div1").width(500).height(500);
});

Probeer het zelf

jQuery CSS referentiemanual

Voor een volledige referentie over jQuery Dimensions, bezoek onze jQuery Dimensions referentiemanual.