CSSStyleDeclaration item() 方法（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，样式控制是前端工程师的核心技能之一。随着项目复杂度的提升，动态操作元素的样式属性成为常见的需求。本文将深入讲解 CSSStyleDeclaration item() 方法，这一方法虽不常被提及，但却是访问元素样式属性的底层工具之一。通过结合实际案例与代码示例，我们不仅会了解其基础用法，还会探讨它与其他方法的差异、适用场景及进阶技巧。无论是编程新手还是有一定经验的开发者，都能从中找到适合自己的知识增量。

一、基础概念：CSSStyleDeclaration 是什么？

CSSStyleDeclaration 是 CSS 对象模型（CSSOM）中的一个接口，用于表示元素的样式声明集合。你可以将其想象为一个“样式仓库”，存储了元素所有通过 style 属性设置的样式属性（如 color、font-size 等）。例如：

const element = document.getElementById("myDiv");
const style = element.style; // style 是 CSSStyleDeclaration 对象

1.1 样式仓库的“货架”结构

每个 CSSStyleDeclaration 对象具备以下特性：

• 键值对存储：样式属性以键（属性名）和值（属性值）的形式存储。
• 索引访问：通过 length 属性可获取样式属性的总数，并通过索引（从 0 开始）访问属性名。
• 动态增删：开发者可以通过代码动态添加、修改或删除样式属性。

形象比喻：

如果将 CSSStyleDeclaration 比作一个超市仓库，那么 item() 方法就像一名仓库管理员，根据货架编号（索引）告诉你该位置存放的商品名称（属性名），而 getPropertyValue() 则像直接取出商品的详细信息（属性值）。

二、深入解析 item() 方法

2.1 方法语法与参数

item() 方法用于通过索引获取样式属性的名称，其语法如下：

const propertyName = style.item(index);

• 参数 index：必须为整数，表示要访问的属性在集合中的位置（从 0 开始）。
• 返回值：若索引有效，返回对应属性的名称；否则返回 null。

注意：
item() 方法不返回属性的值，而是返回属性名。若需获取属性值，需结合 getPropertyValue() 方法。

2.2 与 getPropertyValue() 的对比

案例对比：

const style = document.body.style;
style.color = "red"; // 添加属性
style.fontSize = "16px"; // 添加第二个属性  

console.log(style.item(0)); // 输出："color"（属性名）  
console.log(style.getPropertyValue("color")); // 输出："red"（属性值）  

三、实际案例与代码示例

3.1 基础用法：遍历所有样式属性

通过 item() 方法和 length 属性，可以遍历元素的所有内联样式属性：

function listAllStyles(element) {
  const style = element.style;
  const properties = [];
  for (let i = 0; i < style.length; i++) {
    const propName = style.item(i);
    properties.push({
      name: propName,
      value: style.getPropertyValue(propName)
    });
  }
  return properties;
}

// 使用示例  
const div = document.querySelector("div");
console.log(listAllStyles(div)); // 输出属性名和值的数组  

3.2 高级场景：动态修改样式

结合 item() 和 setProperty() 可实现动态样式控制：

function toggleBorderStyle(element) {
  const style = element.style;
  const currentBorderStyle = style.getPropertyValue("border-style");
  const newBorderStyle = currentBorderStyle === "solid" ? "dashed" : "solid";
  style.setProperty("border-style", newBorderStyle);
}

// 触发示例  
document.querySelector("#myButton").addEventListener("click", () => {
  toggleBorderStyle(document.querySelector("#targetDiv"));
});

四、进阶技巧与注意事项

4.1 索引与属性顺序的关系

样式属性在 CSSStyleDeclaration 中的顺序可能与代码书写顺序一致，也可能因浏览器实现而略有差异。因此，不要依赖索引值作为逻辑判断的依据，除非你完全控制了样式添加的流程。

4.2 处理无效索引

当索引超出范围时，item() 会返回 null。在代码中需做好容错处理：

function getSafePropertyName(style, index) {
  const propName = style.item(index);
  return propName !== null ? propName : "无效索引";
}

五、常见问题解答

Q1：为什么 item() 返回的属性名与 CSS 书写格式不同？

A：CSSStyleDeclaration 中的属性名会自动转换为驼峰命名法。例如，书写 background-color 时，item() 返回 "backgroundColor"。若需获取原始写法，可使用 getPropertyPriority() 或直接操作 cssText。

Q2：能否用 item() 替代 getPropertyValue()？

A：不能。item() 仅返回属性名，若需获取值，必须结合 getPropertyValue() 或直接通过 style.color 等属性访问。

六、结论

CSSStyleDeclaration item() 方法 是访问元素样式属性的底层工具，其核心作用是通过索引获取属性名。通过本文的案例与代码示例，开发者可以掌握如何利用此方法动态操作样式、遍历属性集合，并避免常见陷阱。对于希望深入理解 CSSOM 的工程师而言，掌握 item() 方法是迈向更复杂样式控制（如响应式设计、动画逻辑）的重要一步。

在实际开发中，建议将 item() 与其他方法（如 getPropertyValue() 和 setProperty()）结合使用，以实现更灵活的样式管理。随着项目复杂度的提升，这种底层能力将成为优化代码效率与可维护性的关键。