На разрабатываемой веб-странице подразумевается активная работа с размерами элементов

Опубликовал: admin Thursday, July 11, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

На разрабатываемой веб-странице подразумевается активная работа с размерами элементов. Необходимо получать и устанавливать размеры выбранных элементов.

Решение

Для решения таких задач библиотека jQuery предлагает целый набор методов, которые мы и используем (листинг 4.2.1).

Листинг 4 .2 .1 . Использование методов width(), height() и д р.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-4-2-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> div {
width:120px; height:110px; margin:15px; padding:10px; border:1px dotted #f00; overflow:hidden;
}
button { width:170px; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("input").val($("div").width());
});
$("button:eq(1)").click(function(){
$("input").val($("div").height());
});
$("button:eq(2)").click(function(){
$("input").val($("div").innerWidth());
});
$("button:eq(3)").click(function(){
$("input").val($("div").innerHeight());
});
$("button:eq(4)").click(function(){
$("input").val($("div").outerWidth(true));
});
$("button:eq(5)").click(function(){
$("input").val($("div").outerHeight());
});
$("button:eq(6)").click(function(){
$("div").width($("input").val()*1);
});
$("button:eq(7)").click(function(){
$("div").height($("input").val()*1);
});
});
</script>
</head>
<body>
<button>Получить width</button>
<button>Получить height</button>
<button>Получить innerWidth</button>
<button>Получить innerHeight</button>
<button>Получить outerWidth</button>
<button>Получить outerHeight</button>
<br /><br />
<input type="text" />
<button>Установить width</button>
<button>Установить height</button>
Элемент div
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-4-2-1</title>

width:120px; height:110px; margin:15px; padding:10px; border:1px dotted #f00; overflow:hidden;

}

button { width:170px; }

</style>

$(function(){

$("button:eq(0)").click(function(){

$("input").val($("div").width());

});

$("button:eq(1)").click(function(){

$("input").val($("div").height());

});

$("button:eq(2)").click(function(){

$("input").val($("div").innerWidth());

});

$("button:eq(3)").click(function(){

$("input").val($("div").innerHeight());

});

$("button:eq(4)").click(function(){

$("input").val($("div").outerWidth(true));

});

$("button:eq(5)").click(function(){

$("input").val($("div").outerHeight());

});

$("button:eq(6)").click(function(){

$("div").width($("input").val()*1);

});

$("button:eq(7)").click(function(){

$("div").height($("input").val()*1);

});

</script>

</head>

<body>

<button>Получить width</button>

<button>Получить height</button>

<button>Получить innerWidth</button>

<button>Получить innerHeight</button>

<button>Получить outerWidth</button>

<button>Получить outerHeight</button>

<button>Установить width</button>

<button>Установить height</button>

Элемент div

</body>

</html>

Обсуждение

Код, приведенный в листинге 4.2.1, — это демонстрационная веб-страница, с помощью которой мы познакомимся с методами, позволяющими получать и устанавливать ширину и высоту выбранных элементов. Страница состоит из набора кнопок, элемента ввода input и элемента div. Мы будем получать и изменять размеры элемента div, элемент input будет служить для ввода и вывода значений, а кнопки — для того, чтобы получать и устанавливать соответствующие значения.

Код JavaScript очень однообразен: для каждой кнопки определен обработчик события click. При наступлении события вызывается callback-функция, которая получает ширину (высоту) элемента div и вставляет это значение в поле ввода input. Отличаются только обработчики события для двух последних кнопок — они, наоборот, получают значение, содержащееся в поле ввода input, и устанавливают ширину (высоту) элемента div.

Поговорим о нюансах. Вы наверняка заметили, что значения, полученные из элемента input, умножаются на единицу. Дело в том, что метод val() возвращает строку, а методы width(val) и height(val) принимают число. Умножение на единицу — нехитрый прием в JavaScript, позволяющий преобразовать строковое значение в число.

А почему столько разных методов для получения ширины (высоты)? Здесь тоже все просто — метод width() получает ширину содержимого элемента, т. е. не учитывает ширину отступов (padding), рамок (border) и полей (margin). Метод innerWidth() учитывает ширину содержимого плюс отступы (padding). Метод outerWidth() — ширину содержимого, отступов (padding), рамок (border) и полей (margin). Аналогично обстоит дело и с методами, применяемыми для получения высоты элементов: height(), innerHeight() и outerHeight().

Обратите внимание на значение, которое мы получаем в результате вызова метода outerHeight(). Попробуйте понять, почему оно не соответствует ожиданию. Подсказка: ответ нужно искать в руководстве по CSS.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

На разрабатываемой веб-странице подразумевается активная работа с размерами элементов

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply