Метод css в jQuery

Метод css в jQuery

От автора: приветствую вас, друзья. В ряде предыдущих статей мы с вами изучали основы выборки элементов. Мы узнали различные способы: выборка по классам и идентификаторам, выборка по атрибутам и индексам элементов и т.д. Теперь, когда мы можем выбирать элементы, пришла пора научиться что-то с ними делать. Начнем с изучения метода css в jQuery.

Итак, научившись выбирать коллекцию элементов, давайте учиться работать с этой коллекцией. Начнем с метода css, который позволяет работать с css элементов, т.е. получать и изменять свойства css выбранных элементов.

Метод css() можно использовать в двух вариантах и в зависимости от выбранного варианта мы можем либо получить значение свойства css, либо же установить или изменить его. Для того, чтобы получить значение нужно стилевого свойства, достаточно передать параметром его название. Давайте попробуем. У нас есть следующий список:

<ul id="list">
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
</ul>

С помощью свойства background мы установили для него некоторый фоновый цвет. Попробуем получить значение установленного цвета:

var bg = $('#list').css('background-color');
console.log(bg);

Метод css в jQuery

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

$('#list').css('background-color', 'rgb(255,255,0)'); // можно так
$('#list').css('background-color', 'yellow'); // или так
$('#list').css('background-color', '#ffff00'); // или так

Метод css в jQuery

Как видите, в качестве значения цвета принимается любой формат цвета, как и в CSS. А что если нам необходимо поменять сразу несколько свойств css у выбранного элемента? Теоретически мы можем сделать это, вызвав несколько раз метод css:

$('#list').css('background-color', '#ffff00');
$('#list').css('font-style', 'italic');
$('#list').css('font-size', '18px');

Метод css в jQuery

Однако такой вариант не очень удобен — слишком много строк кода, чтобы изменить оформление одного элемента. Можно сократить код до одной строки, вызывая методы цепочкой, один за другим:

$('#list').css('background-color', '#ffff00').css('font-style', 'italic').css('font-size', '18px');

Результат будет тем же, но теперь слишком много вызовов одного и того же метода. Есть более удобный вариант указать сразу несколько значений для свойств css. Для этого мы можем передать параметром объект свойств:

$('#list').css({
 "background-color": "#ffff00",
 "font-style": "italic",
 "font-size": "18px"
});

Согласитесь, так гораздо удобнее и, главное, понятнее. На этом мы пока остановимся. В следующей статье рассмотрим дополнительные варианты управления оформлением элементов с помощью jQuery. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree