当前位置：首页 > jquery

jquery.css

2026-03-17 03:17:21jquery

jQuery.css() 方法详解

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

获取 CSS 属性值

语法：

$(selector).css(propertyName)

示例：

var color = $('#myElement').css('color');

这将返回 #myElement 的 color 属性值。

设置单个 CSS 属性

语法：

$(selector).css(propertyName, value)

示例：

$('#myElement').css('background-color', 'blue');

这会将 #myElement 的背景色设置为蓝色。

设置多个 CSS 属性

语法：

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

示例：

$('#myElement').css({
  'background-color': 'yellow',
  'font-weight': 'bold',
  'padding': '10px'
});

这会同时设置多个样式属性。

jquery.css

注意事项

属性名可以使用 CSS 格式（如 background-color）或 DOM 格式（如 backgroundColor）
数值不需要指定单位（如 10 而不是 10px），但某些属性可能需要单位
返回的颜色值在不同浏览器中可能格式不同（RGB、HEX 等）
对于简写属性（如 margin），获取值可能因浏览器而异

实际应用示例

// 切换背景颜色
$('#toggleBtn').click(function() {
  var currentColor = $('#box').css('background-color');
  var newColor = currentColor === 'rgb(255, 0, 0)' ? 'green' : 'red';
  $('#box').css('background-color', newColor);
});

// 动画效果
$('#animateBtn').click(function() {
  $('#box').css({
    'width': '200px',
    'height': '200px',
    'transition': 'all 0.5s ease'
  });
});

jQuery.css() 方法提供了一种跨浏览器兼容的方式来操作元素样式，比原生 JavaScript 的 style 属性更加灵活方便。