Mit jQuery, ist es einfach, mit den Abmessungen von Elementen und Browser-Fenster zu arbeiten.
jQuery Dimension Methoden
jQuery hat mehrere wichtige Methoden für die Dimensionen arbeiten:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensions
jQuery width() und height() Methods
Die width() Methode setzt oder liefert die Breite eines Elements (ausgenommen padding, border und margin ).
Die height() Methode setzt oder liefert die Höhe eines Elements (ausgenommen padding, border und margin ).
Das folgende Beispiel gibt die Breite und Höhe eines bestimmten <div> Element:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Versuch es selber " jQuery innerWidth() und innerHeight() Methoden
Die innerWidth() Methode gibt die Breite eines Elements (inklusive padding ).
Die innerHeight() Methode gibt die Höhe eines Elements (inklusive padding ).
Das folgende Beispiel gibt die Innen Breite / Höhe eines bestimmten <div> Element:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Versuch es selber " jQuery outerWidth() und outerHeight() Methoden
Die outerWidth() Methode , um die Breite eines Elements zurück (einschließlich padding und border ).
Die outerHeight() Methode , um die Höhe eines Elements zurück (einschließlich padding und border ).
Das folgende Beispiel gibt die äußere-Breite / Höhe eines bestimmten <div> Element:
Beispiel
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Versuch es selber " Die outerWidth(true) Methode gibt die Breite eines Elements (einschließlich padding, border und margin ).
Die outerHeight(true) Methode gibt die Höhe eines Elements (einschließlich padding, border und margin ).
Beispiel
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Versuch es selber " jQuery Mehr width() und height()
Das folgende Beispiel gibt die Breite und Höhe des Dokuments (das HTML-Dokument) und Fenster (der Browser-Ansichtsfenster):
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);
}); Versuch es selber " Im folgenden Beispiel wird die Breite und Höhe eines bestimmten <div> Element:
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
jQuery CSS Referenz
Eine vollständige Übersicht über alle Methoden jQuery CSS, gehen Sie bitte auf unsere jQuery HTML / CSS Referenz .