jQuery - Dimensionen
Mit jQuery ist es einfach, mit den Abmessungen von Elementen und Browserfenstern zu arbeiten.
jQuery-Dimensionsmethoden
jQuery verfügt über mehrere wichtige Methoden zum Arbeiten mit Dimensionen:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery-Dimensionen
jQuery-Methoden width() und height()
Die width()Methode setzt oder gibt die Breite eines Elements zurück (ohne Padding, Border und Margin).
Die height()Methode setzt oder gibt die Höhe eines Elements zurück (ohne Padding, Border und Margin).
Das folgende Beispiel gibt die Breite und Höhe eines angegebenen <div>
Elements zurück:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() und innerHeight() Methoden
Die innerWidth()Methode gibt die Breite eines Elements zurück (einschließlich Padding).
Die innerHeight()Methode gibt die Höhe eines Elements zurück (einschließlich Padding).
Das folgende Beispiel gibt die innere Breite/Höhe eines angegebenen <div>
Elements zurück:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery-OuterWidth()- und OuterHeight()-Methoden
Die outerWidth()Methode gibt die Breite eines Elements zurück (einschließlich Polsterung und Rahmen).
Die outerHeight()Methode gibt die Höhe eines Elements zurück (einschließlich Polsterung und Rahmen).
Das folgende Beispiel gibt die äußere Breite/Höhe eines angegebenen <div>
Elements zurück:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Die outerWidth(true)Methode gibt die Breite eines Elements zurück (einschließlich Polsterung, Rahmen und Rand).
Die outerHeight(true)Methode gibt die Höhe eines Elements zurück (einschließlich Polsterung, Rahmen und Rand).
Beispiel
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Mehr width() und height()
Das folgende Beispiel gibt die Breite und Höhe des Dokuments (des HTML-Dokuments) und des Fensters (des Browser-Ansichtsfensters) zurück:
Beispiel
$("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);
});
Das folgende Beispiel legt die Breite und Höhe eines angegebenen <div>
Elements fest:
Beispiel
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery-Übungen
jQuery-CSS-Referenz
Eine vollständige Übersicht aller jQuery-CSS-Methoden finden Sie in unserer jQuery HTML/CSS-Referenz .