Управление Размерами Элементов с jQuery

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

Методы Размерностей jQuery

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

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

Размерности jQuery

Размерности jQuery

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

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

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

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

Пример

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

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

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

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

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

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

Пример

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

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

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

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

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

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

Пример

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

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

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

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

Пример

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

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

Еще о jQuery методах width() и height()

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

Пример

$("button").click(function(){
  var txt="";
  txt+="Ширина/высота документа: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Ширина/высота окна: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

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

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

Пример

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

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

Далее: Значки Кнопок jQuery Mobile

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)