jQuery:n mitat

jQuery:n avulla elementtien ja selaimen ikkunan mittojen käsittely on helppoa.

jQuery:n mittoja käsittelevät menetelmät

jQuery tarjoaa useita tärkeitä mittoja käsitteleviä menetelmiä:

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

jQuery:n width() ja height()-menetelmät

width()-menetelmä asettaa tai palauttaa elementin leveys (ei sisällä sisäisiä margineja, reunaviivoja tai ulkoisia margineja).

height()-menetelmä asettaa tai palauttaa elementin korkeuden (ei sisällä sisäisiä margineja, reunaviivoja tai ulkoisia margineja).

Alla olevassa esimerkissä palautetaan määritetyn <div>-elementin leveys ja korkeus:

Esimerkki

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

Kokeile itse

jQuery:n innerWidth() ja innerHeight()-menetelmät

innerWidth()-menetelmä palauttaa elementin leveys (mukaan lukien sisäinen marginaali).

innerHeight()-menetelmä palauttaa elementin korkeuden (mukaan lukien sisäinen marginaali).

Alla olevassa esimerkissä palautetaan määritetty <div>-elementin sisäinen leveys/korkeus:

Esimerkki

$("button").click(function() {
  var txt="";
  txt += "Sisäinen leveys: " + $("#div1").innerWidth() + "</br>";
  txt += "Sisäinen korkeus: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Kokeile itse

jQuery outerWidth() ja outerHeight() -menetelmät

outerWidth() -menetelmä palauttaa elementin leveyden (sisältäen sisennykset ja reunat).

outerHeight() -menetelmä palauttaa elementin korkeuden (sisältäen sisennykset ja reunat).

Seuraavassa esimerkissä palautetaan määritetyn <div>-elementin outer-width/height:

Esimerkki

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

Kokeile itse

outerWidth(true) -menetelmä palauttaa elementin leveyden (sisältäen sisennykset, reunat ja ulkoreunat).

outerHeight(true) -menetelmä palauttaa elementin korkeuden (sisältäen sisennykset, reunat ja ulkoreunat).

Esimerkki

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

Kokeile itse

jQuery - lisää width() ja height()

Seuraavassa esimerkissä palautetaan asiakirjan (HTML-asiakirja) ja ikkunan (selaimen näyttöikkuna) leveys ja korkeus:

Esimerkki

$("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);
});

Kokeile itse

Seuraavassa esimerkissä asetetaan määritetyn <div>-elementin leveys ja korkeus:

Esimerkki

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

Kokeile itse

jQuery CSS -viittauskirjasto

Jos haluat täydellisen kirjaston jQuery Dimensionsista, vierailkaamme jQuery:n mittakaavakirjastomme.