jQuery - Afmetingen
Met jQuery is het eenvoudig om te werken met de afmetingen van elementen en browservenster.
jQuery-dimensiemethoden
jQuery heeft verschillende belangrijke methoden om met dimensies te werken:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery-afmetingen
jQuery width() en height() Methoden
De width()methode bepaalt of retourneert de breedte van een element (exclusief opvulling, rand en marge).
De height()methode bepaalt of retourneert de hoogte van een element (exclusief opvulling, rand en marge).
Het volgende voorbeeld retourneert de breedte en hoogte van een opgegeven <div>
element:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() en innerHeight() methoden
De innerWidth()methode retourneert de breedte van een element (inclusief opvulling).
De innerHeight()methode retourneert de hoogte van een element (inclusief opvulling).
Het volgende voorbeeld retourneert de binnenbreedte/hoogte van een opgegeven <div>
element:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() en outerHeight() Methoden
De outerWidth()methode retourneert de breedte van een element (inclusief opvulling en rand).
De outerHeight()methode retourneert de hoogte van een element (inclusief opvulling en rand).
Het volgende voorbeeld retourneert de buitenste breedte/hoogte van een opgegeven <div>
element:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
De outerWidth(true)methode retourneert de breedte van een element (inclusief opvulling, rand en marge).
De outerHeight(true)methode retourneert de hoogte van een element (inclusief opvulling, rand en marge).
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Meer width() en height()
Het volgende voorbeeld retourneert de breedte en hoogte van het document (het HTML-document) en venster (de browserviewport):
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);
});
In het volgende voorbeeld worden de breedte en hoogte van een opgegeven <div>
element ingesteld:
Voorbeeld
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery-oefeningen
jQuery CSS-referentie
Ga voor een compleet overzicht van alle jQuery CSS-methoden naar onze jQuery HTML/CSS Reference .