Содержание:
.css( propertyName )Возвращает: Строка
Описание: Получение вычисленных свойств стиля для первого элемента в наборе сопоставленных элементов.
-
версия добавлена: 1.0.css( propertyName )
- propertyNameТип: СтрокаСвойство CSS.
-
-
версия добавлена: 1.9.css( propertyNames )
- propertyNamesТип: МассивМассив из одного или нескольких свойств 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" ) и так далее.
Элемент должен быть подключён к DOM при вызове .css() на нём. Если этого не сделать, jQuery может выдать ошибку.
Начиная с jQuery 1.9, передача массива свойств стиля в .css() приведет к объекту пар свойство-значение. Например, чтобы получить все четыре отрисованных значения border-width, можно использовать $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Начиная с jQuery 3.2, поддерживаются пользовательские свойства CSS (также называемые переменными CSS): $( "p" ).css( "--custom-property" ). Обратите внимание, что вам нужно указать имя свойства как есть, преобразование в верблюжий регистр не сработает, как это работает для обычных свойств CSS.
Примеры:
Получить цвет фона нажатого 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-3.7.0.js"></script>
</head>
<body>
<span id="result"> </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> Демо:
Получить ширину, высоту, цвет текста и цвет фона нажатого 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-3.7.0.js"></script>
</head>
<body>
<p id="result"> </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> 
