jQuery - Afmetings
Met jQuery is dit maklik om met die afmetings van elemente en blaaiervenster te werk.
jQuery Dimensie Metodes
jQuery het verskeie belangrike metodes om met dimensies te werk:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery Dimensions
jQuery width () en hoogte () Metodes
Die width()metode stel of gee die breedte van 'n element terug (sluit opvulling, rand en kantlyn uit).
Die height()metode stel of gee die hoogte van 'n element terug (sluit opvulling, rand en kantlyn uit).
Die volgende voorbeeld gee die breedte en hoogte van 'n gespesifiseerde <div>
element terug:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth () en innerHeight () Metodes
Die innerWidth()metode gee die breedte van 'n element terug (sluit opvulling in).
Die innerHeight()metode gee die hoogte van 'n element terug (sluit vulling in).
Die volgende voorbeeld gee die binne-breedte/hoogte van 'n gespesifiseerde <div>
element terug:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth () en outerHeight () Metodes
Die outerWidth()metode gee die breedte van 'n element terug (sluit opvulling en rand in).
Die outerHeight()metode gee die hoogte van 'n element terug (sluit opvulling en rand in).
Die volgende voorbeeld gee die buitenste breedte/hoogte van 'n gespesifiseerde <div>
element terug:
Voorbeeld
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Die outerWidth(true)metode gee die breedte van 'n element terug (sluit opvulling, rand en kantlyn in).
Die outerHeight(true)metode gee die hoogte van 'n element terug (sluit opvulling, rand en kantlyn in).
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 breedte() en hoogte()
Die volgende voorbeeld gee die breedte en hoogte van die dokument (die HTML-dokument) en venster (die blaaier-aansigpoort):
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);
});
Die volgende voorbeeld stel die breedte en hoogte van 'n gespesifiseerde <div>
element:
Voorbeeld
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery Oefeninge
jQuery CSS-verwysing
Vir 'n volledige oorsig van alle jQuery CSS-metodes, gaan asseblief na ons jQuery HTML/CSS-verwysing .