Управление Размерами Элементов с jQuery
С jQuery легко работать с размерами элементов и окна браузера.
Методы Размерностей jQuery
у jQuery есть несколько важных методов для того, чтобы работать с размерностями:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
Размерности jQuery
jQuery Методы width() и height()
Метод width() устанавливает или возвращает ширину элемента (не включая заполнения, границы или поля).
Метод height() устанавливает или возвращает высоту элемента (не включая заполнения, границы или поля).
Следующий пример возвращает ширину и высоту указанного <div> элемента:
Пример
var txt="";
txt+="Ширина: " + $("#div1").width() + "</br>";
txt+="Высота: " + $("#div1").height();
$("#div1").html(txt);
});
Попробуйте сами »
jQuery Методы innerWidth() и innerHeight()
Метод innerWidth() возвращает ширину элемента (включая заполнение).
Метод innerHeight() возвращает высоту элемента (включает заполнение).
Следующий пример возвращает внутреннюю ширину/высоту указанного <div> элемента:
Пример
var txt="";
txt+="Внутренняя ширина: " + $("#div1").innerWidth() + "</br>";
txt+="Внутренняя высота: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Попробуйте сами »
jQuery Методы outerWidth() и outerHeight()
Метод outerWidth() возвращает ширину элемента (включая заполнение и границу).
Метод outerHeight() возвращает высоту элемента (включая заполнение и границу).
Следующий пример возвращает внешнюю ширину/высоту указанного <div> элемента:
Пример
var txt="";
txt+="Внешняя ширина: " + $("#div1").outerWidth() + "</br>";
txt+="Внешняя высота: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Попробуйте сами »
Метод outerWidth(true) возвращает ширину элемента (включая заполнение, границу и поле).
Метод outerHeight(true) возвращает высоту элемента (включая заполнение, границу и поле).
Пример
var txt="";
txt+="Внешняя ширина (+поле): " + $("#div1").outerWidth(true) + "</br>";
txt+="Внешняя высота (+поле): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
Попробуйте сами »
Еще о jQuery методах width() и height()
Следующий пример возвращает ширину и высоту документа (документа HTML) и окна (области просмотра браузера):
Пример
var txt="";
txt+="Ширина/высота документа: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Ширина/высота окна: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
Попробуйте сами »
Следующий пример устанавливает ширину и высоту указанного <div> элемента: