.css()

Получить значение вычисленного свойства стиля для первого элемента из набора выбранных элементов или задать одно или несколько свойств CSS для каждого выбранного элемента.

Содержание:

.css( propertyName )
- .css( propertyName )
- .css( propertyNames )
.css( propertyName, value )

.css( propertyName )Возвращает: String

Описание: Получить вычисленные свойства стиля для первого элемента из набора выбранных элементов.

добавлено в версии: 1.0.css( propertyName )
- propertyName
  
  Тип: String
  
  Свойство CSS.
добавлено в версии: 1.9.css( propertyNames )
- propertyNames
  
  Тип: Array
  
  Массив из одного или нескольких свойств CSS.

Метод .css() позволяет удобно получить вычисленное свойство стиля первого выбранного элемента, особенно учитывая различия в способах доступа браузеров к большинству таких свойств (метод getComputedStyle() в браузерах, соответствующих стандартам, в отличие от свойств currentStyle и runtimeStyle в Internet Explorer до версии 9), а также различия в названиях некоторых свойств, используемых браузерами. Например, реализация DOM в Internet Explorer называет свойство float как styleFloat, тогда как браузеры, соответствующие стандартам W3C, называют его cssFloat. Для единообразия достаточно использовать "float", а jQuery преобразует его в нужное значение для каждого браузера.

Кроме того, jQuery одинаково интерпретирует CSS-форматирование и форматирование DOM для свойств, состоящих из нескольких слов. Например, jQuery понимает и возвращает правильное значение как для .css( "background-color" ), так и для .css( "backgroundColor" ). Это означает, что регистр имеет особое значение: например, .css( "WiDtH" ) не будет работать так же, как .css( "width" ).

Обратите внимание, что вычисленный стиль элемента может отличаться от значения, заданного для этого элемента в таблице стилей. Например, вычисленные размеры почти всегда выражены в пикселях, хотя в таблице стилей они могут быть заданы в em, ex, px или %. Разные браузеры могут возвращать значения цветов CSS, которые логически, но не текстуально эквивалентны, например #FFF, #ffffff и rgb(255,255,255).

Получение сокращённых свойств CSS (например, margin, background, border), хотя и работает в некоторых браузерах, не гарантируется. Например, чтобы получить отображаемое значение border-width, используйте: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ) и так далее.

При вызове .css() элемент должен быть подключён к DOM. В противном случае jQuery может вызвать ошибку.

Начиная с jQuery 1.9, передача массива свойств стиля в .css() возвращает объект пар «свойство — значение». Например, чтобы получить все четыре отображаемых значения border-width, можно использовать $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

Начиная с jQuery 3.2, поддерживаются пользовательские свойства CSS (также называемые переменными CSS): $( "p" ).css( "--custom-property" ). Обратите внимание: имя свойства необходимо указывать без изменений; преобразование в camelCase, как для обычных свойств CSS, не сработает.

Примеры:

Пример 1

Получить цвет фона div, по которому щёлкнули.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
 
<script>
$( "div" ).on( "click", function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>
 
</body>
</html>

Демонстрация:

Пример 2

Получить ширину, высоту, цвет текста и цвет фона div, по которому щёлкнули.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    height: 50px;
    margin: 5px;
    padding: 5px;
    float: left;
  }
  #box1 {
    width: 50px;
    color: yellow;
    background-color: blue;
  }
  #box2 {
    width: 80px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 99, 30);
  }
  #box3 {
    width: 40px;
    color: #fcc;
    background-color: #123456;
  }
  #box4 {
    width: 70px;
    background-color: #f11;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
 
<script>
$( "div" ).on( "click", function() {
  var html = [ "The clicked div has the following styles:" ];
 
  var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
  ]);
  $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
  });
 
  $( "#result" ).html( html.join( "<br>" ) );
});
</script>
 
</body>
</html>

Демонстрация:

.css( propertyName, value )Возвращает: jQuery

Описание: Задать одно или несколько свойств CSS для набора выбранных элементов.

добавлено в версии: 1.0.css( propertyName, value )
- propertyName
  
  Тип: String
  
  Имя свойства CSS.
- value
  
  Тип: String или Number
  
  Значение, которое нужно задать свойству.
добавлено в версии: 1.4.css( propertyName, function )
- propertyName
  
  Тип: String
  
  Имя свойства CSS.
- function
  
  Тип: Function( Integer index, String value ) => String или Number
  
  Функция, возвращающая устанавливаемое значение. this — текущий элемент. В качестве аргументов получает индекс элемента в наборе и его предыдущее значение.
добавлено в версии: 1.0.css( properties )
- properties
  
  Тип: PlainObject
  
  Объект пар «свойство — значение», которые нужно задать.

Как и метод .prop(), метод .css() позволяет быстро и удобно задавать свойства элементов. Этот метод принимает либо имя свойства и значение в виде отдельных параметров, либо один объект с парами «ключ — значение».

Кроме того, jQuery одинаково интерпретирует CSS-форматирование и форматирование DOM для свойств, состоящих из нескольких слов. Например, jQuery понимает и возвращает правильное значение как для .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }), так и для .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Обратите внимание: в записи DOM кавычки вокруг имён свойств необязательны, а в записи CSS они необходимы из-за дефиса в имени.

В jQuery 3.x и более ранних версиях, если в качестве значения передано число, jQuery преобразует его в строку и добавляет px в конец этой строки. Однако есть исключения. px не добавляется к ключам из jQuery.cssNumber. Если свойству требуются единицы измерения, отличные от px, преобразуйте значение в строку и добавьте нужные единицы перед вызовом метода.

В jQuery 4.0 и более новых версиях, если в качестве значения передано число, jQuery преобразует его в строку и добавит px в конец этой строки только для ограниченного набора свойств — преимущественно связанных с шириной, высотой, границей, внешними и внутренними отступами. Полный список:

задание положения элемента: top, right, bottom, left
задание размеров элемента: width, height, min-width, min-height, max-width, max-height
padding-related: padding, padding-top, padding-right, padding-bottom, padding-left
связанные с margin: margin, margin-top, margin-right, margin-bottom, margin-left
связанные с border: border, border-width, border-top, border-top-width, border-right, border-right-width, border-bottom, border-bottom-width, border-left, border-left-width

При использовании .css() для задания значения jQuery изменяет свойство style элемента. Например, $( "#mydiv" ).css( "color", "green" ) эквивалентно document.getElementById( "mydiv" ).style.color = "green". Если задать пустую строку в качестве значения свойства стиля — например, $( "#mydiv" ).css( "color", "" ), — это свойство будет удалено из элемента, если оно уже было задано напрямую: в атрибуте HTML style, с помощью метода .css() в jQuery или путём прямого изменения свойства style DOM. В результате для этого свойства элемента восстановится ранее применённое значение. Таким образом, этот метод можно использовать для отмены любых ранее внесённых изменений стиля. Однако он не удаляет стиль, заданный правилом CSS в таблице стилей или элементе <style>. Предупреждение: есть важное исключение для IE 8 и более ранних версий: удаление сокращённого свойства, например border или background, полностью удалит этот стиль из элемента независимо от того, что задано в таблице стилей или элементе <style>.

Примечание: .css() не поддерживает объявления !important. Поэтому инструкция $( "p" ).css( "color", "red !important" ) в jQuery 3.6.0 не делает все абзацы на странице красными. Однако не полагайтесь на то, что это не работает: в будущей версии jQuery может появиться поддержка таких объявлений. Настоятельно рекомендуется вместо этого использовать классы; в противном случае воспользуйтесь плагином jQuery.

Начиная с jQuery 1.8, метод .css() для задания значения автоматически добавляет нужный префикс к имени свойства. Например, .css( "user-select", "none" ) в Chrome/Safari задаст его как -webkit-user-select, Firefox использует -moz-user-select, а IE10 — -ms-user-select.

Начиная с jQuery 1.6, .css() принимает относительные значения, аналогично .animate(). Относительные значения — это строки, начинающиеся с += или -=, которые увеличивают или уменьшают текущее значение. Например, если внутренний отступ элемента слева равен 10px, .css( "padding-left", "+=15" ) задаст общий внутренний отступ слева, равный 25px.

Начиная с jQuery 1.4, .css() позволяет передавать функцию в качестве значения свойства:

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

В этом примере ширина выбранных элементов постепенно увеличивается.

Примечание: Если функция задания значения ничего не возвращает (то есть function( index, style ){} )) или возвращает undefined, текущее значение не изменяется. Это удобно, когда нужно задавать значения выборочно, только при выполнении определённых условий.

Начиная с jQuery 3.2, поддерживаются пользовательские свойства CSS (также называемые переменными CSS): $( "p" ).css( "--custom-property", "value" ). Обратите внимание: имя свойства необходимо указывать без изменений; преобразование в camelCase, как для обычных свойств CSS, не сработает.

Примеры:

Пример 1

При наведении курсора мыши изменить цвет любого абзаца на красный.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    width: 200px;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
  <p>Just roll the mouse over me.</p>
 
  <p>Or me to see a color change.</p>
 
<script>
$( "p" ).on( "mouseover", function() {
  $( this ).css( "color", "red" );
});
</script>
 
</body>
</html>

Демонстрация:

Пример 2

При первом щелчке увеличить ширину #box на 200 пикселей.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  #box {
    background: black;
    color: snow;
    width: 100px;
    padding: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<div id="box">Click me to grow</div>
 
<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
 
</body>
</html>

Демонстрация:

Пример 3

Выделить слово в абзаце, по которому щёлкнули.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    font-weight: bold;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<p>
  Once upon a time there was a man
  who lived in a pizza parlor. This
  man just loved pizza and ate it all
  the time.  He went on to be the
  happiest man in the world.  The end.
</p>
 
<script>
var words = $( "p" ).first().text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
  $( this ).css( "background-color", "yellow" );
});
</script>
 
</body>
</html>

Демонстрация:

Пример 4

Изменить насыщенность шрифта и цвет фона при наведении курсора и при уходе курсора.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
 
<script>
$( "p" )
  .on( "mouseenter", function() {
    $( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });
  })
  .on( "mouseleave", function() {
    var styles = {
      backgroundColor : "#ddd",
      fontWeight: ""
    };
    $( this ).css( styles );
  });
</script>
 
</body>
</html>

Демонстрация:

Пример 5

Увеличить размер div при щелчке по нему.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 20px;
    height: 15px;
    background-color: #f33;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>click</div>
<div>click</div>
 
<script>
$( "div" ).on( "click", function() {
  $( this ).css({
    width: function( index, value ) {
      return parseFloat( value ) * 1.2;
    },
    height: function( index, value ) {
      return parseFloat( value ) * 1.2;
    }
  });
});
</script>
 
</body>
</html>

Содержание:

.css( propertyName )Возвращает: String

добавлено в версии: 1.0.css( propertyName )

добавлено в версии: 1.9.css( propertyNames )

Примеры:

Пример 1

Демонстрация:

Пример 2

Демонстрация:

.css( propertyName, value )Возвращает: jQuery

добавлено в версии: 1.0.css( propertyName, value )

добавлено в версии: 1.4.css( propertyName, function )

добавлено в версии: 1.0.css( properties )

Примеры:

Пример 1

Демонстрация:

Пример 2

Демонстрация:

Пример 3

Демонстрация:

Пример 4

Демонстрация:

Пример 5

Демонстрация: