jQuery css() 方法：获取样式、单双属性设置及函数计算详解

蓝鲸

发布时间：2026-10-13| 1人浏览过

原创

掌握 jQuery css() 方法是前端开发中动态调整页面样式的核心技能。该方法不仅支持直接获取或设置单一的 CSS 属性值，还能接收对象一次性应用多个样式规则，更可通过回调函数根据元素索引等条件实现动态样式计算。

结果或目标

利用 css() 方法在运行时改变 DOM 元素的视觉表现，如颜色、宽高、边距等，并处理复杂的交互状态（如鼠标悬停）。

准备条件

已引入 jQuery 库文件（推荐版本 3.x 以兼顾兼容性与性能）。
HTML 结构中包含待操作的目标元素。
了解 CSS 属性的标准命名规范（如 backgroundColor 而非 background-color）。

真实操作顺序

第1步：获取元素的当前样式值

目的：读取指定 CSS 属性的当前渲染值。

入口：$().css("propertyname")

动作：传递一个参数字符串作为样式名。

// 获取第一个 p 元素的背景颜色
color = $("p").css("background-color");
// 返回值为字符串，如 "yellow" 或 "rgb(255, 255, 0)"

完成状态：变量中保存了对应元素的计算后样式值。

第2步：设置单一 CSS 属性

目的：将特定样式应用到所有匹配元素。

入口：$().css("propertyname", "value")

动作：传递两个参数，分别为样式属性和目标值。

// 将所有 p 标签文字设为黄色
$("p").css("color", "yellow");

// 修改宽度（数值单位可选，默认无单位时视为px）
$("div").css("width", "300");
$("div").css("width", "+=20"); // 基于当前宽度增加 20px
$("div").css("width", "-=20"); // 基于当前宽度减少 20px

重要参数：支持数学运算字符串（+=, -=）进行相对变化。

第3步：批量设置多个 CSS 属性

目的：通过一个对象同时定义多种样式，代码更整洁。

入口：$().css({ "prop": "val", ... })

动作：传入键值对形式的 JSON 对象。

// 方式A：直接在调用时传入对象
$("#result").css({
  "background-color": "#EEE",
  "font-size": "20px"
});

// 方式B：先定义变量，再传入
var divStyle = {
  background: "#EEE",
  width: "478px",
  margin: "10px 0 0",
  padding: "5px 10px",
  border: "1px solid #CCC"
};
$("#result").css(divStyle);

第4步：使用回调函数动态计算样式

目的：根据不同元素的状态（如索引）动态生成样式。

入口：$().css("propertyname", function(index, oldValue))

动作：传入函数，函数返回计算后的值。

// 偶数索引的 p 标签背景为红色，奇数为蓝色
$("p").css("backgroundColor", function(index){
  return index % 2 == 0 ? "red" : "blue";
});

第5步：配合 hover() 实现交互样式

目的：模拟 CSS 中的 :hover 伪类效果。

入口：$().hover(inHandler, outHandler)

动作：

定义鼠标移入时的样式切换逻辑。
定义鼠标移出时的样式还原逻辑。

$("#link-container a").hover(
  function(){
    // 鼠标划入
    $(this).css("color", "#999");
  },
  function(){
    // 鼠标划出
    $(this).css("color", "#123456");
  }
);

注意：虽然 css() 可实现此功能，但在实际开发中，建议优先使用添加/移除 CSS 类（addClass/removeClass）的方式来处理悬停样式，以获得更好的可维护性和性能。

完成判断

在浏览器控制台打开 Elements 面板，选中被操作的元素，在 Styles 窗口中可见即时更新的样式属性。例如执行 $("div").css("width", "+=20") 后，元素宽度应比初始值增加 20px。

原文有依据的排错

选择器失效问题：尝试直接使用 $("a:hover") 选取处于悬停状态的元素是无效的，因为 :hover 是动态状态而非静态 DOM 属性，必须依赖事件监听或 CSS 伪类。
样式名写法：CSS 属性名中使用连字符时需转换为驼峰命名法（如 background-color 写作 backgroundColor），或在字符串参数中使用引号包裹的连字符形式（部分新版 jQuery 支持连字符，但驼峰更安全）。