jQuery css — метод для работы со стилями элементов

В это статье рассмотрим манипуляцию стилями элементов страницы с помощью метода jQuery css. Разберем, как получить, добавить, изменить и удалить стили у веб-элемента с помощью этого метода.

Содержание

Получить стили
Добавить или изменить стили
Удалить стили
Заключение

Получить стили

Чтобы получить значение определенного свойства стилей, необходимо у jQuery-объекта элемента вызвать метод css и передать этому методу в качестве параметра название CSS-свойства. Можно получить значения как одного свойства, так и нескольких.

Синтаксис получения стилей с помощью метода jQuery css:

// Извлечение значения одного свойства...
const elementStyle = $('selector').css('property');

// ... и нескольких свойств
const elementStyles = $('selector').css(['property1', 'property2']);

Приведем пример. Допустим, у нас есть прямоугольник с установленными значениями цвета границы и фона. Распечатаем эти значения внутри самого прямоугольника.

HTML и CSS примера выглядит следующим образом:

<div id="demoBlock" class="demoBlock">
    <div id="demoBlockContent" class="demoBlock__content">
        <p>Цвет границы: <span id="demoBlockBorder"></span></p>
        <p>Цвет фона: <span id="demoBlockBackground"></span></p>
    </div>
</div>

.demoBlock__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 3px solid #0d7ee7;
    background: #f5a623;
    font-size: 0.8em;
}

.demoBlock__content p {
    display: inline-block;
    width: 80%;
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0.3em;
}

Для получения текущих значений свойств стилей и установки их внутрь прямоугольника можно использовать такой JavaScript-код:

// Извлекаем текущие значение цвета границы прямоугольника и устанавливаем их внутрь прямоугольника
const borderColor = $('#demoBlockContent').css('border-color');
$('#demoBlockBorder').text(borderColor);

const backgroundColor = $('#demoBlockContent').css('background-color');
$('#demoBlockBackground').text(backgroundColor);

Результат:

Цвет границы:

Цвет фона:

Извлечь несколько значений CSS-свойств сразу можно следующим образом:

// Получение объекта со значениями цвета границы и фона
const borderAndBackgroundColor = $('#demoBlockContent').css(['border-color', 'background-color']);
console.log(borderAndBackgroundColor); // {border-color: 'rgb(13, 126, 231)', background-color: 'rgb(245, 166, 35)'}

// Получение значений из объекта
console.log(borderAndBackgroundColor['border-color'], borderAndBackgroundColor['background-color']);

Перебрать значения стилей всех элементов с определенным селектором можно с помощью метода each:

<div id="someContainer">
    <p>Первый</p>
    <p>Второй</p>
    <p>Третий</p>
</div>

$('#someContainer p').each(function() {
    console.log($(this).css(['width', 'height']));
});

Добавить или изменить стили

Для добавления стилей элементу или их изменения методу css, помимо названия CSS-свойства, передается также и значение, которое необходимо установить или заменить. Можно устанавливать либо изменять одно или сразу несколько значений свойств стилей. При работе с несколькими свойствами нужно передать объект, ключи которого являются именами свойств, а значения объекта — значениями свойств.

Синтаксис добавления или замены стилей с помощью метода jQuery css:

// Установка или замена значения одного свойства...
$('selector').css('property', 'value');

// ... и нескольких свойств
$('selector').css({
    'property1': 'value1',
    'property2': 'value2'
});

Дополним наш пример возможностью изменять цвет границ и фона прямоугольника. Создадим две палитры для выбора цвета этих двух составляющих прямоугольника с помощью тега input с типом color. При выборе определенного цвета он будет устанавливаться нашей фигуре и прописываться внутри нее.

HTML и CSS обновленного примера выглядит так:

<div id="demoBlock" class="demoBlock">
    <div id="demoBlockContent" class="demoBlock__content">
        <p>Цвет границы: <span id="demoBlockBorder"></span></p>
        <p>Цвет фона: <span id="demoBlockBackground"></span></p>
    </div>

    <div class="demoBlock__actions">
        <div>
            <label for="demoBorderPicker">Выберите цвет границы:</label>
            <input type="color" id="demoBorderPicker" value="#0d7ee7">
        </div>
        <div>
            <label for="demoBackgroundPicker">Выберите цвет фона:</label>
            <input type="color" id="demoBackgroundPicker" value="#f5a623">
        </div>
    </div>
</div>

.demoBlock__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 3px solid #0d7ee7;
    background: #f5a623;
    font-size: 0.8em;
}

.demoBlock__content p {
    display: inline-block;
    width: 80%;
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0.3em;
}

.demoBlock__actions {
    margin-top: 1em;
}

.demoBlock__actions input {
    margin-left: 0.1em;
    cursor: pointer;
}

Также обновим JavaScript-код, с помощью которого будем изменять цвет границы и фона фигуры при выборе цвета в палитре цветов:

// Берем объект палитры для границы
const borderColorPicker = $('#demoBorderPicker');

// На событие изменения палитры добавляем обработчик
borderColorPicker.on('change', function() {
// При изменении палитры берем ее текущий цвет, устанавливаем для нашего блока
    $('#demoBlockContent').css('border-color', borderColorPicker.val());
// … и выводим значение цвета внутри фигуры
    $('#demoBorder').text(borderColorPicker.val());
});

// Проводим аналогичные действия и для фона
const backgroundColorPicker = $('#demoBackgroundPicker');

backgroundColorPicker.on('change', function() {
    $('#demoBlockContent').css('background-color', backgroundColorPicker.val());
    $('#demoBackground').text(backgroundColorPicker.val());
});

Результат выполнения кода выше представлен в этом интерактивном примере:

Цвет границы:

Цвет фона:

Выберите цвет границы:

Выберите цвет фона:

Пример добавления или изменения нескольких свойств:

$('#block').css({
    'border-color': 'red',
    'background-color': 'green'
});

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

<p class="someText">Пример текста для изменения размера шрифта.</p>
<button id="increaseFontSize">Размер шрифта +</button>

$('#increaseFontSize').click(function() {
    $('.someText').css('font-size', function(index, value) {
        return parseFloat(value) + 2 + 'px';
    });
});

Удалить стили

Для удаления стилей с помощью метода jQuery css можно просто присвоить свойству значение '' (пустая строка).

Синтаксис удаления стилей с помощью метода jQuery css:

// Удаление значения одного свойства...
$('selector').css('property', '');

// ... и нескольких свойств
$('selector').css({
    'property1': '',
    'property2': ''
});

Доработаем наш пример с прямоугольником. Добавим кнопку («Сброс»), при нажатии на которую стили фигуры будут сбрасываться на значения по умолчанию:

<div id="demoBlock" class="demoBlock">
    <div id="demoBlockContent" class="demoBlock__content">
        <p>Цвет границы: <span id="demoBorder"></span></p>
        <p>Цвет фона: <span id="demoBackground"></span></p>
    </div>

    <div class="demoBlock__actions">
        <div>
            <label for="demoBorderPicker">Выберите цвет границы:</label>
            <input type="color" id="demoBorderPicker" value="#0d7ee7">
        </div>
        <div>
            <label for="demoBackgroundPicker">Выберите цвет фона:</label>
            <input type="color" id="demoBackgroundPicker" value="#f5a623">
        </div>
        <div>
            <button id="demoReset">Сброс</button>
        </div>
    </div>
</div>

const borderColorPicker = $('#demoBorderPicker');

borderColorPicker.on('change', function() {
    $('#demoBlockContent').css('border-color', borderColorPicker.val());
    $('#demoBlockBackground').text(borderColorPicker.val());
});

const backgroundColorPicker = $('#demoBackgroundPicker');

backgroundColorPicker.on('change', function() {
    $('#demoBlockContent').css('background-color', backgroundColorPicker.val());
    $('#demoBlockBackground').text(backgroundColorPicker.val());
});

// При нажатии на кнопку...
$('#demoReset').click(function() {
// ...сбросим установленные стили
    $('#demoBlockContent').css({
        'border-color': '',
        'background-color': ''
    });
// ...и удалим текст со значениями цвета внутри фигуры
    $('#demoBlockBorder').text('');
    $('#demoBlockBackground').text('');
});

Результат выполнения кода выше:

Цвет границы:

Цвет фона:

Выберите цвет границы:

Выберите цвет фона:

Заключение

Таким образом, метод jQuery css позволяет получить, добавлять, изменять и удалять CSS-стили у элементов веб-страницы. Этот метод обычно применяется для динамического изменения стилей, например, для стилизации элементов после реакции на событие. Не стоит рассматривать метод css для обычной CSS-стилизации.

Манипуляция стилями элементов с помощью метода jQuery css

Получить стили

Добавить или изменить стили

Удалить стили

Заключение