Необходимо установить цвет фона какого-либо элемента.
Решение
Снова решаем задачу с помощью метода css() (листинг 4.1.2).
Листинг4 .1 .2 . Использование метода css()
<!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-1-2</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:150px; height:150px; margin:5px; float:left; border:1px solid #369; }
</style>
<script type="text/javascript">
$(function(){
$("button").click(function () {
var color = $("input").val();
$("div").css("background-color", color);
});
});
</script>
</head>
<body>
<input type="text" />
<button>Применить</button>
</body>
</html>
Обсуждение
В листинге 4.1.2 приведен HTML-код, описывающий элемент ввода, куда мы будем вводить код нужного цвета, кнопку, при нажатии на которую будет вызываться JavaScript-код, выполняющий требуемую операцию. Есть еще элемент div, для которого заданы некоторые CSS-свойства, такие как width, height или border. Для этого элемента мы будем изменять цвет фона.
Первое, что делает JavaScript-код при нажатии кнопки button — получает код цвета, введенный в элемент input с помощью метода val(), и сохраняет это значение в переменной color. Затем будет найден элемент div, для которого будет установлено значение CSS-свойства background-color с помощью метода css().
Передавая методу css() два аргумента — название CSS-свойства и его значение, мы можем установить значение этого свойства.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)
- Создание галереи миниатюр (0)