Необходимо решить задачу получения цвета фона какого-либо элемента, иными словами, значение CSS-свойства background-color.
Решение
Для решения такой задачи подойдет метод css() (листинг 4.1.1).
Листинг4 .1 .1 . Использование метода css()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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-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:60px; height:60px; margin:5px; float:left; } </style> <script type="text/javascript"> $(function(){ $("div").click(function () { var color = $(this).css("background-color"); $("#result").text("Значение свойства background-color = " + color); }); }); </script> </head> <body> <span id="result"> </span> </body> </html> |
Обсуждение
HTML-разметка, показанная в листинге 4.1.1, описывает четыре элемента div, которым заданы разные цвета фона, и элемент span, необходимый нам лишь для вывода результатов.
В JavaScript-коде сначала выбираем все элементы div, указывая в селекторе название элемента, и связываем с ними функцию-обработчик события click. При наступлении этого события применяем к элементу, на котором был совершен щелчок, метод css(), а результат сохраняем в переменной color. Следующая строка кода вставляет в элемент span поясняющий текст и значение переменной color.
Конечно, этот пример можно было бы записать и короче, ведь нет никакой необходимости создавать переменную color только ради того, чтобы хранить промежуточный результат.
Передавая методу css() единственный аргумент — название CSS-свойства, мы можем получить значение этого свойства.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Репутация на примере «рейтинга школ» (0)
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- Что такое селекторы и как их правильно использовать (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Создание макета с тремя колонками средствами CSS (0)
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля горизонтальной линии (0)