jQuery dimensioner

Med jQuery er det nemt at håndtere dimensioner af elementer og browservinduet.

jQuery dimensioner metoder

jQuery tilbyder flere vigtige metoder til håndtering af dimensioner:

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

jQuery width() og height() metoder

width() metoden sætter eller returnerer elementets bredde (ikke inkluderer indre margen, kant eller ekstern margen).

height() metoden sætter eller returnerer elementets højde (ikke inkluderer indre margen, kant eller ekstern margen).

Dette eksempel returnerer den specificerede <div>-elements bredde og højde:

Eksempel

$("button").click(function(){
  var txt="";
  txt += "Bredde: " + $("#div1").width() + "</br>";
  txt += "Højde: " + $("#div1").height();
  $("#div1").html(txt);
);

Prøv det selv

jQuery innerWidth() og innerHeight() metoder

innerWidth() metoden returnerer elementets bredde (inkluderer indre margen).

innerHeight() metoden returnerer elementets højde (inkluderer indre margen).

Dette eksempel returnerer den specificerede <div>-elements indre bredde/højde:

Eksempel

$("button").click(function(){
  var txt="";
  txt += "Indre bredde: " + $("#div1").innerWidth() + "</br>";
  txt += "Indre højde: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Prøv det selv

jQuery outerWidth() og outerHeight() metoder

outerWidth() metoden returnerer elementets bredde (inklusive indrykning og kant).

outerHeight() metoden returnerer elementets højde (inklusive indrykning og kant).

Følgende eksempel returnerer den angivne <div>-elements outer-width/height:

Eksempel

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

Prøv det selv

outerWidth(true) metoden returnerer elementets bredde (inklusive indrykning, kant og margin).

outerHeight(true) metoden returnerer elementets højde (inklusive indrykning, kant og margin).

Eksempel

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

Prøv det selv

jQuery - mere width() og height()

Følgende eksempel returnerer dokumentet (HTML-dokument) og vinduet (browserviewport) bredde og højde:

Eksempel

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

Prøv det selv

Følgende eksempel sætter bredde og højde på den angivne <div>-element:

Eksempel

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

Prøv det selv

jQuery CSS reference manual

For en fuld reference til jQuery Dimensions, besøg vores jQuery dimension reference manual.