jQuery dimensioner

Genom jQuery är det enkelt att hantera dimensionerna för element och webbläsarfönstret.

jQuery dimensioner

jQuery erbjuder flera viktiga metoder för hantering av dimensioner:

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

jQuery width() och height() metoder

width() metoden ställer in eller returnerar elementets bredd (exklusive inre marginaler, kantlinjer eller ytmarginaler).

height() metoden ställer in eller returnerar elementets höjd (exklusive inre marginaler, kantlinjer eller ytmarginaler).

Följande exempel returnerar den specifika <div>-elementets bredd och höjd:

Exempel

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

Prova själv

jQuery innerWidth() och innerHeight() metoder

innerWidth() metoden returnerar elementets bredd (inklusive inre marginaler).

innerHeight() metoden returnerar elementets höjd (inklusive inre marginaler).

Följande exempel returnerar den specifika <div>-elementets inner-width/height:

Exempel

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

Prova själv

jQuery outerWidth() och outerHeight() metoder

outerWidth() metoden returnerar elementets bredd (inklusive inre marginaler och kanter).

outerHeight() metoden returnerar elementets höjd (inklusive inre marginaler och kanter).

Nedanstående exempel returnerar yttre bredd/höjd för det specificerade <div>-elementet:

Exempel

$("button").click(function(){
  var txt="";
  txt+="Yttre bredd: " + $("#div1").outerWidth() + "</br>";
  txt+="Yttre höjd: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Prova själv

outerWidth(true) metoden returnerar elementets bredd (inklusive inre marginaler, kanter och yttre marginaler).

outerHeight(true) metoden returnerar elementets höjd (inklusive inre marginaler, kanter och yttre marginaler).

Exempel

$("button").click(function(){
  var txt="";
  txt+="Yttre bredd (+marginal): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Yttre höjd (+marginal): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Prova själv

jQuery - mer om width() och height()

Nedanstående exempel returnerar bredden och höjden på dokumentet (HTML-dokument) och fönstret (webbläsarens vyfönster):

Exempel

$("button").click(function(){
  var txt="";
  txt+="Dokument bredd/höjd: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Fönster bredd/höjd: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Prova själv

Nedanstående exempel sätter bredden och höjden på det specificerade <div>-elementet:

Exempel

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

Prova själv

jQuery CSS referenshandbok

För en fullständig referens till jQuery Dimensions, besök vår jQuery dimensioner referenshandbok.