css()

посл. ред. 12.08.2016

Метод css() изменяет значение указанного CSS-свойства у всех элементов выборки или возвращает значение этого свойства для первого элемента.

Названия свойств можно указывать и в CSS-формате, и как в DOM-интерфейсе. Например, названия 'font-size' и 'fontSize' или 'float' и 'cssFloat' равноценны.

Значения свойств должны указываться в виде строки или числа. Если значение передано в виде числа, тогда оно автоматически конвертируется в строку и к нему добавляется px. Если число не должно иметь единицы измерения (например, для свойства line-height и т.п.), тогда его необходимо самостоятельно конвертировать в строку.

Если значение начинается с символов += или -=, тогда метод автоматически увеличивает или уменьшает значение свойства на заданную величину. Например, если свойство имеет значение 20px, тогда для увеличения значения на 10 пикселей можно использовать запись '+=10'.

Ключевое слово !important игнорируется методом. Для этих целей лучше использовать классы.

Для нестандартных свойств jQuery автоматически добавляет префиксы в зависимости от браузера.

Чтобы удалить ранее установленное значение, необходимо свойству присвоить пустую строку. Удалить значения свойств, установленных во внешнем файле или в теге <style>, нельзя.

Варианты использования

jQ_object.css(CSS-свойство) => String: Возвращает значение указанного свойства для первого элемента выборки. Возвращается вычисленное значение, как в методе getComputedStyle().
Для обобщённых свойств (margin вместо margin-top, margin-left и т.п.) корректная работа метода не гарантируется, так как значения свойств определяются браузерами.
Чтобы получить значения нескольких свойств, названия свойств необходимо перечислить в виде массива, например css(['margin-top', 'margin-right', 'margin-bottom', 'margin-left']). В этом случае результатом метода будет объект.
jQ_object.css(CSS-свойство, значение) => jQuery: Каждому элементу выборки устанавливает новое значение указанного CSS-свойства. Значение свойства передаётся вторым аргументом.
jQ_object.css({CSS-свойство1: значение1, CSS-свойство2: значение2, ...}) => jQuery: Каждому элементу выборки устанавливает новые значения указанных CSS-свойств. Значения свойств передаются в виде объекта.
Если названия свойств указываются как в DOM-интерфейсе, тогда заключать их в кавычки не обязательно. Например, можно написать так css({'margin-top': 10, 'margin-bottom': 20}) или так css({marginTop: 10, marginBottom: 20}).
jQ_object.css(CSS-свойство, функция) => jQuery: У каждого элемента выборки изменяет значение указанного CSS-свойства на новое, возвращённое указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно. Она должна возвращать строку или число. Если ничего не возвращается или возвращается undefined, тогда значение свойства не меняется.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущее значение данного CSS-свойства. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф</p>
</body>
</html>
 
<script>
$('p').css('border', '2px solid red');
var border = $('p').css(['borderTopWidth', 'borderTopStyle', 'borderTopColor']);
alert(border.borderTopWidth); /* 2px */
alert(border.borderTopStyle); /* solid */
alert(border.borderTopColor); /* rgb(255, 0, 0) */
</script>

Параграф