Получение и установка CSS-свойств элементам в jQuery
Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

В jQuery работа со стилями HTML элементов осуществляется через метод css
. Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.
Как получить стиль элемента в jQuery
Первый вариант метода css - это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.
Синтаксис метода css
:
// Вариант 1 (получение окончательного одного CSS свойства)
.css( propertyName )
// propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить
.css( propertyNames )
// propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить
Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.
Пример, в котором получим цвет фона непосредственно применённого к элементу #header
:
var bgHeader = $('#header').css('background-color');
В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.
// можно и так
var bgHeader = $('#header').css('backgroundColor');
Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.
Например, определим значение свойства display
у всех выбранных элементов и выведем их в консоль:
// переберём все элементы .container
$('.container').each(function(index){
// значение css-свойства display текущего элемента набора
var display = $(this).css('display');
// выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display)
console.log(index + '. display = '+ display);
});
Кроме этого, метод css
позволяет также получить сразу несколько CSS свойств у элемента.
Например, при нажатии на HTML элемент div
выведим его ширину и высоту:
<div style="width: 100px; height: 100px; background-color: bisque;"></div>
<div style="width: 200px; height: 200px; background-color: lightseagreen;"></div>
...
<script>
// при нажатии на элемент div
$('div').click(function () {
// создадим переменную, которая будет содержать результат
var output = [];
// получим значения сразу нескольких CSS свойств
var cssProperties = $(this).css(['width', 'height']);
// переберём полученные свойства
$.each(cssProperties, function (prop, value) {
// добавим в массив элемент, содержащий имя свойства и значения
output.push(prop + ": " + value);
});
//выведем массив в качестве содержимого элемента
$(this).html(output.join('<br>'));
});
</script>
Как изменить или добавить стиль к элементу в jQuery
Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:
// 1 вариант (для установки одного стиля элементу)
.css( propertyName, value )
// 2 вариант (установка значения стиля с помощью функции)
css( propertyName, function )
// 3 вариант (для установки несколько стилей элементу)
css( properties )
// Описание параметров:
// propertyName (тип: String) – имя CSS-свойства
// value (тип: String или Number) – значение, которое нужно установить CSS-свойству
// function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
// Синтаксис функции:
// Function( Integer index, String value ) => String или Number
// В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
// properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.
При установлении стилей с помощью метода css
, они задаются ко всем элементам текущего набора.
Например, добавим ко всем элементам .info
серый цвет фона (background):
<div class="info">...</div>
<div class="info">...</div>
<script>
$('.info').css('background', 'grey');
</script>
Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары 'имяСвойства' : значение.
.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})
Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success
:
$('.success').css({
'color':'green',
'font-size':'16px'
});
В качестве значения строки также можно использовать относительные значения, которые начинаются с +=
или -=
. Первое выражение используется для увеличения текущего значения CSS свойства, а второе - для уменьшения.
Например, увеличим отступ слева и справа у элементов .container
на 10px
:
$('.container').css({
"padding-left": "+=10",
"padding-right":"+=10"
});
Ещё один способ использования метода css - это применение в качестве 2 параметра функции.
.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number
Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.
Например, установим всем элементам .text
, у которых цвет шрифта не равен чёрному, CSS свойство color
, равное red
.
$('.text').css('color',function(index,value){
if (value!=='rgb(0, 0, 0)') {
return 'red';
}
});
Например, поменяем значение CSS свойства width
у всех элементов img
на странице, находящихся #content
:
$('#content img').css('width','300px');
Как удалить определённый стиль у элемента
Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.
Например, уберём у всех изображений на странице CSS свойство height
:
$('img').css('height','');
Например:
подскажите пожалуйста, как можно переписать
$('.classА#'+id+' .classB').css({'background-position' :'Х1 X2'}); в стандарте ЕS6? (Если причина в этом.),
так как в таком ввиде .css({'background-position' :'Х1 Х2'}) не меняется.
Смысл всего етого в том, что бы при нажатии на елемент списка менялся {'background-position' :'Х1 Х2'} только у этого елемента
Зарание спасибо!
Для этого вам нужно создать обработчик события. Например:
Я попробую на выходных и о пишусь…
К сожалению не получилось.
Может быть я не корректно описал проблемму, попробую еще раз:
Я пытаюсь написать mediaplayer, который состоит из самого player и списка песен.
Pядом с названием песни стоит значек play pause, который должен переключатся при клике на песню, причем только у данной песни.
Уменя иммется массив: songs = [
track_one=[0, 'Name-Song_1) ', song1.mp3', '231.026'],
…
track_twelve=[19, 'Name-Song_12 ', 'song12.mp3', '172.617143'],
];
список песен выводистся в виде в циклa:
for(i=0; i< songs.length; i++){
$('.player-wrap').append(
'
}
И вот когда проиходит клик на новую песню
$('.song, .play-pause').on('click', function() {
let id = $(this).attr('id');
$('.song#'+id+' .play-pause__song').css({'background-position' :'-12px 2px'}); // плай и пауза это одна картинка
//"… здесь выполнается функция запуска новой песни."
});
play, pause не меняются у выбранной песни, но если в этой части $('.song#'+id+' .play-pause__song') убрать '.song#'+id+' и оставить только ' .play-pause__song', то все работает только смена плай на пауза проиходит у всех песен одновременно.
.play-pause__song — это класс у картинки с play, pause
Зарание спасибо
Подскажите, как решить задачу, а именно.
Есть группа кнопок, необходимо задать активное состояние нажатой кнопки, без потери фокуса, если нажать на любом месте экрана. Активность кнопки снимается только в том случае, если будет нажата другая кнопка из этой группы/
Заранее спасибо за любой ответ
Есть кнопка
CW
и есть описанный её класс, часть класса используется из бутстрапа (btn)
.btn-mods
.btn-mods:hover
.btn-mods:focus
.btn-mods:hover:after
Пример решения этой задачи:
Класс btn-focus определяет принадлежность кнопки к группе, для которой это необходимо выполнять.
Демо этого примера доступно по этой ссылке.
Огромное спасибо!
Чтобы это осуществить вам необходимо каждую букву в параграфе обернуть в тег, например, span. После этого вы можете к ним можете добавить inline стили или установить их с помощью CSS.
Например, изменить цвет чётных букв в параграфе на указанный цвет:
Ещё вопрос: #profiles- это левая часть модального окна. И при уменьшении размеров, картинка выходит за его рамки.
После этого данное значение использовать так:
Например, для картинки 16x9 (9/16*100 = 56,25%).
Как сделать картинку адаптивной. Я знаю, что у меня в коде ошибка. Но как сделать, не знаю.
HTML-разметка:
JavaScript: