От автора: приветствую вас, друзья. В ряде предыдущих статей мы с вами изучали основы выборки элементов. Мы узнали различные способы: выборка по классам и идентификаторам, выборка по атрибутам и индексам элементов и т.д. Теперь, когда мы можем выбирать элементы, пришла пора научиться что-то с ними делать. Начнем с изучения метода css в jQuery.
Итак, научившись выбирать коллекцию элементов, давайте учиться работать с этой коллекцией. Начнем с метода css, который позволяет работать с css элементов, т.е. получать и изменять свойства css выбранных элементов.
Метод css() можно использовать в двух вариантах и в зависимости от выбранного варианта мы можем либо получить значение свойства css, либо же установить или изменить его. Для того, чтобы получить значение нужно стилевого свойства, достаточно передать параметром его название. Давайте попробуем. У нас есть следующий список:
|
1 2 3 4 5 6 7 |
<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 мы установили для него некоторый фоновый цвет. Попробуем получить значение установленного цвета:
|
1 2 |
var bg = $('#list').css('background-color'); console.log(bg); |
Таким образом мы получили RGB значение цвета. Для того чтобы изменить цвет или любое другое свойство css элемента, нам необходимо передать нужное значение свойства вторым параметром. Попробуем изменить цвет:
|
1 2 3 |
$('#list').css('background-color', 'rgb(255,255,0)'); // можно так $('#list').css('background-color', 'yellow'); // или так $('#list').css('background-color', '#ffff00'); // или так |
Как видите, в качестве значения цвета принимается любой формат цвета, как и в CSS. А что если нам необходимо поменять сразу несколько свойств css у выбранного элемента? Теоретически мы можем сделать это, вызвав несколько раз метод css:
|
1 2 3 |
$('#list').css('background-color', '#ffff00'); $('#list').css('font-style', 'italic'); $('#list').css('font-size', '18px'); |
Однако такой вариант не очень удобен — слишком много строк кода, чтобы изменить оформление одного элемента. Можно сократить код до одной строки, вызывая методы цепочкой, один за другим:
|
1 |
$('#list').css('background-color', '#ffff00').css('font-style', 'italic').css('font-size', '18px'); |
Результат будет тем же, но теперь слишком много вызовов одного и того же метода. Есть более удобный вариант указать сразу несколько значений для свойств css. Для этого мы можем передать параметром объект свойств:
|
1 2 3 4 5 |
$('#list').css({ "background-color": "#ffff00", "font-style": "italic", "font-size": "18px" }); |
Согласитесь, так гораздо удобнее и, главное, понятнее. На этом мы пока остановимся. В следующей статье рассмотрим дополнительные варианты управления оформлением элементов с помощью jQuery. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
