Установка сразу нескольких свойств css с помощью jQuery.

Давайте сейчас разберем интересный прием установки сразу нескольких свойств css с помощью jQuery. Такой прием можно встретить во многих скриптах, поэтому нужно иметь такую форму записи в виду, чтобы в нужной ситуации вы были готовы к этому.

Я хочу рассмотреть два варианта, как это можно сделать.

В обоих вариантах HTML-код будет одинаковый:

<p>Тестовый абзац</p>

Теперь давайте применим к этому абзацу несколько стилей css одновременно.

1 вариант. Использовать метод css два раза.

$("p").css("color","red").css("font-size","25px");

Для выбранного селектора можно использовать метод css столько раз, сколько это будет нам необходимо.

Честно признаться, до недавнего времени я думал, что этот метод можно использовать только один раз.

Посмотрите, как это работает на практике.

2 вариант. Создание вспомогательного объекта.

Есть еще один способ, как можно добиться аналогичного эффекта, но для этого создается дополнительный объект, в котором перечисляются все стили, которые нужно применить к элементу.

Выглядит это вот так:

var cssValues = {
    "color":"red",
    "font-size":"25px"
}
$("p").css(cssValues);

В итоге, добиваемся того же результата, что и в предыдущем варианте.

Вот «живой» пример: