Метод css
Методът css позволява получаване
и промяна на CSS стиловете на елемент.
Важно е да запомните, че ще получаваме 'изчислени
стойности' на свойствата (computed style
properties), които могат да се различават от
зададените в CSS стиловете.
Синтаксис
Получаване на едно свойство:
$(селектор).css(свойство);
Получаване на няколко свойства, подаваният параметър - масив от имена на свойства:
$(селектор).css(['width', 'height', 'color']);
Промяна на едно свойство:
$(селектор).css(свойство, нова стойност);
Нека променим няколко свойства, като ги подадем като обект,
съдържащ двойки 'ключ: стойност'. Името на свойството
се посочва във вид на CamelCase:
$(селектор).css({fontSize: '12px', color: 'red'});
Или, алтернативен вариант:
<p class="www">текст</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Също така можем да приложим зададена функция към всеки
елемент в набора. При това първият параметър функцията
ще получи номера на елемента в набора, а вторият параметър
- текущата стойност на зададеното CSS свойство
за конкретния елемент. При това this
във функцията ще сочи към текущия елемент.
CSS свойството на всеки елемент ще се промени на това,
което функцията върне конкретно за този елемент:
$(селектор).css(име на свойство, function(номер в набор, текуща стойност на CSS свойство));
Пример
Нека получим всички елементи с клас www
и променим цвета им на червен:
<p class="www">текст</p>
$('.www').css('color', 'red');
Пример
Нека получим всички елементи с клас www
и променим цвета им на червен, а размера на шрифта
- на 20px:
<p class="www">текст</p>
$('.www').css({color:'red', fontSize:'20px'});
Или, алтернативен вариант:
<p class="www">текст</p>
$('.www').css({'color':'red', 'font-size':'20px'});
