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