Размеры jQuery

С помощью jQuery легко обрабатывать размеры элементов и окна браузера.

Методы размеров jQuery

jQuery предоставляет множество важных методов для обработки размеров:

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

Методы width() и height() в jQuery

Метод width() устанавливает или возвращает ширину элемента (не включая внутренние поля, рамки или внешние поля).

Метод height() устанавливает или возвращает высоту элемента (не включая внутренние поля, рамки или внешние поля).

Ниже приведен пример, который возвращает ширину и высоту指定的<div>элемента:

Пример

$("button").click(function(){
  var txt="";
  txt += "Ширина: " + $("#div1").width() + "</br>";
  txt += "Высота: " + $("#div1").height();
  $("#div1").html(txt);
});

Попробуйте сами

Методы innerWidth() и innerHeight() в jQuery

Метод innerWidth() возвращает ширину элемента (включая внутренние поля).

Метод innerHeight() возвращает высоту элемента (включая внутренние поля).

Ниже приведен пример, который возвращает inner-width/height指定的<div>элемента:

Пример

$("button").click(function(){
  var txt="";
  txt += "Внутренняя ширина: " + $("#div1").innerWidth() + "</br>";
  txt += "Внутренняя высота: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Попробуйте сами

Методы jQuery outerWidth() и outerHeight()

Метод outerWidth() возвращает ширину элемента (включая отступы и рамки).

Метод outerHeight() возвращает высоту элемента (включая отступы и рамки).

В следующем примере возвращается outer-width/height указанного элемента <div>:

Пример

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

Попробуйте сами

Метод outerWidth(true) возвращает ширину элемента (включая отступы, рамки и маржу).

Метод outerHeight(true) возвращает высоту элемента (включая отступы, рамки и маржу).

Пример

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

Попробуйте сами

jQuery - еще больше width() и height()

В следующем примере возвращаются ширина и высота документа (HTML-документ) и окна (видимой части браузера):

Пример

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

Попробуйте сами

В следующем примере устанавливается ширина и высота указанного элемента <div>:

Пример

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

Попробуйте сами

Руководство по CSS jQuery

Если вам нужно полное руководство по jQuery Dimensions, пожалуйста, посетите наше руководство по размерам jQuery.