jQuery — Размеры
С jQuery легко работать с размерами элементов и окна браузера.
Методы измерения jQuery
jQuery имеет несколько важных методов для работы с измерениями:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Размеры jQuery
jQuery методы ширины () и высоты ()
Метод width()устанавливает или возвращает ширину элемента (исключая отступы, границы и поля).
Метод height()устанавливает или возвращает высоту элемента (исключая отступы, границы и поля).
Следующий пример возвращает ширину и высоту указанного <div>
элемента:
Пример
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Методы jQuery innerWidth() и innerHeight()
Метод innerWidth()возвращает ширину элемента (включая отступы).
Метод innerHeight()возвращает высоту элемента (включая отступы).
Следующий пример возвращает внутреннюю ширину/высоту указанного <div>
элемента:
Пример
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery методы externalWidth() и externalHeight()
Метод outerWidth()возвращает ширину элемента (включая отступы и границы).
Метод outerHeight()возвращает высоту элемента (включая отступы и границы).
В следующем примере возвращается внешняя ширина/высота указанного <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 (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Больше ширины() и высоты()
В следующем примере возвращаются ширина и высота документа (документа 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);
});
jQuery-упражнения
Справочник по jQuery CSS
Полный обзор всех CSS-методов jQuery см. в нашем справочнике по jQuery HTML/CSS .