Rozmiar jQuery

Dzięki jQuery, łatwo można obsługiwać rozmiary elementów i okna przeglądarki.

Metody rozmiaru jQuery

jQuery oferuje wiele ważnych metod do przetwarzania rozmiarów:

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

Metody width() i height() jQuery

Metoda width() ustawia lub zwraca szerokość elementu (bez wewnętrznych marginesów, ramki lub marginesów zewnętrznych).

Metoda height() ustawia lub zwraca wysokość elementu (bez wewnętrznych marginesów, ramki lub marginesów zewnętrznych).

Poniższy przykład zwraca szerokość i wysokość określonego <div> elementu:

Przykład

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

Spróbuj sam

Metody innerWidth() i innerHeight() jQuery

Metoda innerWidth() zwraca szerokość elementu (w tym wewnętrzne marginesy).

Metoda innerHeight() zwraca wysokość elementu (w tym wewnętrzne marginesy).

Poniższy przykład zwraca określony <div> element wewnętrznej szerokości/wysokości:

Przykład

$("button").click(function(){
  var txt="";
  txt += "Wewnętrzna szerokość: " + $("#div1").innerWidth() + "</br>";
  txt += "Wewnętrzna wysokość: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Spróbuj sam

Metody jQuery outerWidth() i outerHeight()

Metoda outerWidth() zwraca szerokość elementu (w tym wewnętrzne marginesy i ramki).

Metoda outerHeight() zwraca wysokość elementu (w tym wewnętrzne marginesy i ramki).

Poniższy przykład zwraca zewnętrzną szerokość i wysokość określonego elementu <div>:

Przykład

$("button").click(function(){
  var txt="";
  txt+="Zewnętrzna szerokość: " + $("#div1").outerWidth() + "</br>";
  txt+="Zewnętrzna wysokość: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

Spróbuj sam

Metoda outerWidth(true) zwraca szerokość elementu (w tym wewnętrzne marginesy, ramki i zewnętrzne marginesy).

Metoda outerHeight(true) zwraca wysokość elementu (w tym wewnętrzne marginesy, ramki i zewnętrzne marginesy).

Przykład

$("button").click(function(){
  var txt="";
  txt+="Zewnętrzna szerokość (+margines): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Zewnętrzna wysokość (+margines): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Spróbuj sam

jQuery - więcej width() i height()

Poniższy przykład zwraca szerokość i wysokość dokumentu (dokument HTML) i okna (pole widzenia przeglądarki):

Przykład

$("button").click(function(){
  var txt="";
  txt+="Szerokość/wysokość dokumentu: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Szerokość/wysokość okna: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

Spróbuj sam

Poniższy przykład ustawia szerokość i wysokość określonego elementu <div>:

Przykład

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

Spróbuj sam

Księga referencyjna jQuery CSS

Aby uzyskać pełną dokumentację jQuery Dimensions, odwiedź naszą stronę z referencją jQuery rozmiarów.