# Метод 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'});`

## Смотрите также

- метод `width`,
  который позволяет получать и изменять ширину элемента
- метод `offset`,
  который позволяет получать текущие координаты элемента

← →
↑