jQuery Размеры

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

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

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

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

jQuery Размеры

jQuery Dimensions

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

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

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

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

Пример

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

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

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

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

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

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

Пример

$("button").click(function(){ var txt=""; txt+="ширина div, включая padding:" + $("#div1").innerWidth() + "</br>"; txt+="высота div, включая padding:" + $("#div1").innerHeight(); $("#div1").html(txt); });

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

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

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

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

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

Пример

$("button").click(function(){ var txt=""; txt+="ширина div, включая padding и border:" + $("#div1").outerWidth() + "</br>"; txt+="высота div, включая padding и border:" + $("#div1").outerHeight(); $("#div1").html(txt); });

Попробуйте сами
Другие расширения