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

Рубрика: jQuery и HTML

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

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

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

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

Размерности 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

Смотрите также

Комментарии

Написать