jQuery метод .css()

Определение и применение

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя. Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

$( selector ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]) // возвращаем значения CSS свойств ширины границы для каждой стороны

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

.css({ "background-color": "#000",
	   "border-left": "1px solid green" })

.css({ "backgroundColor": "#000",
	   "borderLeft": "1px solid green" })

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

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

$( "#myElement" ).css( "color", "red" ) // с использованием библиотеки jQuery

document.getElementById( "myElement" ).style.color = "red" // на нативном JavaScript

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

$( "#myElement" ).css( "color", "" )

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

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

$( selector ).css( "height", function( index ) {
	return index * 5; // высота элемента увеличивается в зависимости от индекса
});

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -=, чтобы увеличить или уменьшить текущее значение.

$( selector ).css( "margin-left", "+=40" ) // увеличит внешний отступ элемента на 40 пикселей (прибавит к текущему значению 40)

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

jQuery синтаксис:

/* Возвращаем (return properties) */

Синтаксис 1.0:

$( selector ).css( propertyName ) // возвращаем значение CSS свойства (в виде строки)

propertyName - String

Синтаксис 1.9:

$(selector).css( [propertyNames] ) // возвращаем значения CSS свойств (в виде строки)

propertyNames - Array // перечисление свойств в массиве через запятую

/* Задаем (set properties) */

Синтаксис 1.0:

$( selector ).css( propertyName, value ) // устанавливаем значение CSS свойства

$( selector ).css( {   // устанавливаем значения CSS свойств (передаем в объекте)
				propertyName: value,
				propertyName: value,
				propertyName: value
				} )

propertyName - String

value - String, или Number

Синтаксис 1.4:

$( selector ).css( propertyName, function( index, value) ) // устанавливаем новое значение CSS свойства с использованием функции

propertyName - String

function - Function

index - Integer

value - String

Добавлен в версии jQuery

Значения параметров

Особенности современных версий

В jQuery 4.0 числовое значение получает суффикс px только для ограниченного набора свойств: размеров, позиции, отступов и ширины границ. Для остальных размерных значений указывайте единицу явно: .css("gap", "12px"). Безразмерные значения, например opacity: 0.5, остаются числами. Объект $.cssNumber удалён.

С версии 3.2 доступны пользовательские свойства CSS: .css("--accent", "tomato"). Их имена сохраняют дефисы, а значения передавайте строками с нужными единицами. Чтение .css("opacity") у отсоединённого элемента в 4.0 может вернуть пустую строку; прежнее значение "1" больше не подставляется в стандартных браузерах.

Пример использования

Метод .css() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p style="color: red">Раз</p>
<p style="color: green">Два</p>
<p style="color: blue">Три</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        console.log($('p').css('color')) // возвращаем значение одного свойства первого совпавшего элемента <p>
        console.log($('p').css(['borderTop', 'borderRight', 'borderBottom', 'borderLeft'])) // возвращаем несколько значений  свойств первого совпавшего элемента <p>
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

p {
  border: 1px solid #000; /* сплошная граница черного цвета размером 1 пиксель */
}

В этом примере с использованием jQuery метода .css() мы в первом случае возвращаем значение одного свойства и выводим информацию в консоль браузера (обратите внимание, что информация у браузера Chrome выводится в системе RGB), а во втором случае возвращаем значения в виде объекта сразу четырех свойств. Обратите внимание, что в jQuery можно использовать как значения CSS свойств, например, border-top, так и DOM свойств borderTop.

Рассмотрим пример в котором с помощью метода .css() установим для элементов различные CSS свойства:

Установка значений свойств методом .css()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p>Раз</p>
<p>Два</p>
<p>Три</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p:first').css('color', 'red')
        $('p:last').css({ color: 'green', border: '1px solid orange', 'font-weight': 'bold' })
    })
})

В этом примере с использованием jQuery метода .css() мы в первом случае с использованием селектора :first устанавливаем значение одного свойства первому элементу <p> в документе, а во втором случае с использованием метода .css() и селектора :last устанавливаем несколько свойств и значений последнему элементу <p>. Обратите внимание, что синтаксис при установки нескольких свойств отличается.

Рассмотрим пример в котором в качестве значения параметра метода .css() передадим функцию:

Использование функции в качестве значения параметра метода .css()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').css('width', function (index, value) {
            return parseFloat(value) * 1.1
        })
    })
})

style.css

CSS

div {
    width: 100px;
    height: 100px;
    background: yellow;
}

В этом примере с использованием jQuery метода .css() и функции, переданной в качестве значения параметра мы изменяем при каждом нажатии на кнопку ширину элемента. Обратите внимание, что в примере была использована JavaScript функция parseFloat(), которая принимает строку в качестве аргумента и возвращает десятичное число.