当前位置：首页 > jquery

jquery的css方法

2026-03-17 07:11:38jquery

jQuery 的 css() 方法

jQuery 的 css() 方法用于获取或设置匹配元素的 CSS 属性值。它提供了灵活的方式来操作元素的样式。

获取 CSS 属性值

语法：

$(selector).css(propertyName)

propertyName：需要获取的 CSS 属性名称（字符串）。

示例：

var color = $('#element').css('color');
console.log(color); // 输出元素的颜色值（如 "rgb(255, 0, 0)"）

设置单个 CSS 属性

语法：

jquery的css方法

$(selector).css(propertyName, value)

propertyName：CSS 属性名称（字符串）。
value：属性值（字符串、数字或函数）。

示例：

$('#element').css('color', 'red');
$('#element').css('font-size', '16px');

设置多个 CSS 属性

语法：

$(selector).css({ property1: value1, property2: value2, ... })

传入一个对象，键为 CSS 属性名，值为对应的属性值。

示例：

jquery的css方法

$('#element').css({
    'color': 'blue',
    'background-color': 'yellow',
    'padding': '10px'
});

使用函数设置属性值

可以通过函数动态计算属性值，函数的参数为元素的索引和当前属性值。

语法：

$(selector).css(propertyName, function(index, currentValue) { return newValue; })

示例：

$('div').css('width', function(index, currentWidth) {
    return parseInt(currentWidth) + 10 + 'px';
});

注意事项

属性名可以使用驼峰式（如 backgroundColor）或连字符式（如 background-color）。
获取属性值时，返回的计算值可能因浏览器而异（如颜色可能返回 rgb() 或十六进制值）。
设置属性值时，单位（如 px）通常需要显式指定，除非属性是无单位的（如 z-index）。

示例综合应用

// 获取并设置样式
var oldColor = $('.box').css('background-color');
$('.box').css('border', '2px solid ' + oldColor);

// 批量设置样式
$('.item').css({
    'margin': '5px',
    'padding': '10px',
    'display': 'inline-block'
});

// 使用函数动态设置
$('.bar').css('height', function(i, h) {
    return (i + 1) * 10 + 'px';
});

css() 方法是 jQuery 中操作样式的核心方法，结合其他 jQuery 方法可以实现复杂的样式交互效果。