原生JavaScript获取元素样式：全面解析与兼容写法

理解获取最终应用的 CSS 属性对象

当我们谈论“获取元素样式”时，通常指的是获取应用在元素上的所有有效 CSS 属性，无论其来源是标签内的 style 属性、页面的 <style> 块，还是通过 <link> 引入的外部 CSS 文件。如果元素未设置任何自定义样式，上述方法通常会返回浏览器默认的初始值。

方法一：ele.style —— 仅限内联样式

在学习 DOM 节点操作时，最常见的误区是直接通过 element.style.property 读取样式。必须明确：

• 局限性：它只能读取写在 HTML 标签 style="..." 中的样式值。
• 返回值：对于未在行内定义的样式（如 CSS 类选择器设置的样式），它会返回空字符串 ""，而非计算后的实际值。

第1步：测试 ele.style 的表现

可以通过以下代码观察其行为。

var test = document.getElementById("test");
// 假设 test 没有行内 style，或者没有定义 color
var textColor = test.style.color;
console.log(textColor); // 通常输出空字符串 ""

因此，ele.style 适用于动态设置样式，但不适用于获取元素当前的真实外观样式。

方法二：getComputedStyle() —— 现代浏览器标准

window.getComputedStyle 是目前 W3C 标准的推荐方法，能够获取元素当前应用的所有最终 CSS 属性值。

第2步：掌握基本语法与参数

该方法接受两个参数：

1. 目标元素：要获取计算样式的 DOM 节点。
2. 伪类（可选）：例如 ":before" 或 ":after"。若无需查询伪元素样式，传入 null 即可。

使用示例：

var test = document.getElementById("test");
// 获取整个计算样式对象
var styleObj = window.getComputedStyle(test, null);
// 获取特定属性，注意属性名通常是连字符格式（如 background-color）
var bgColor = styleObj.backgroundColor;
// 或者使用 getPropertyValue 方法
var borderColor = styleObj.getPropertyValue("border-color");

第3步：了解特殊注意事项

在使用 getComputedStyle 时，有几个关键细节：

• 颜色格式转换：Firefox 和 Safari 等部分浏览器会将颜色自动转换为 RGB 或 RGBA 格式（例如将 #ffffff 转为 rgb(255, 255, 255)）。
• 默认样式：若元素没有任何自定义样式，调用 style.length 可能会返回该浏览器赋予该标签的一系列默认预置样式的数量。
• 综合属性：对于如 border 这样的简写属性，某些浏览器可能返回空或特定简写值，建议单独获取具体属性如 borderTopWidth。

兼容性提示：该方法在现代浏览器（Chrome, Firefox, Safari, Edge）中均受支持，但不兼容 IE8 及以下版本。

方法三：ele.currentStyle —— 解决 IE 兼容问题

在 IE6 到 IE8 环境中，无法使用 getComputedStyle。此时需要使用微软专有属性 currentStyle。

第4步：正确访问 IE 的 currentStyle

它的用法与 style 类似，但返回的是最终应用样式（包括外部 CSS）。

var test = document.getElementById("test");
// 在 IE6-8 中生效
var ieStyle = test.currentStyle;
var color = ieStyle.color;

注意点：

• 如同前面提到的综合属性问题，IE 的 currentStyle 对某些复合样式（如完整的 border 对象）的处理也可能表现为 undefined，但对 borderLeftWidth 这种分解后的属性支持良好。

方法四与五：精准提取与驼峰命名处理

在使用 getComputedStyle 获取样式对象后，有两种读取属性的方式：

第5步：利用 getPropertyValue() 获取连字符属性名

getPropertyValue() 方法严格遵循 CSS 规范，属性名使用连字符连接（kebab-case）。

var style = window.getComputedStyle(test, null);
var bg = style.getPropertyValue("background-color");

第6步：处理 JavaScript 的驼峰命名法

当直接通过点语法访问属性时（如 obj.backgroundColor），JavaScript 引擎会自动将 CSS 的连字符形式转换为驼峰形式（camelCase）。

// 下面两者等价
style['background-color']; // 错误写法，因为 JS 对象属性不能含连字符作为标识符的一部分，但在方括号中可以用引号包裹
style['backgroundColor'];  // 正确，对应 CSS 的 background-color
style.backgroundColor;     // 正确，等同于上一行

注意：在 IE6-8 中，虽然 currentStyle 也遵循此驼峰映射规则，但它不支持标准的 getPropertyValue 方法。

实战：编写兼容所有浏览器的获取样式函数

考虑到项目可能需要同时兼容古老的 IE8 和新式浏览器，可以封装一个名为 getStyle 的工具函数。

第7步：实现条件分支逻辑

检测 window.getComputedStyle 是否存在来决定走哪条路径：

/**
 * 获取元素最终计算的样式对象
 * @param {HTMLElement} ele - DOM 元素
 * @returns {CSSStyleDeclaration|object} - 样式对象
 */
function getStyle(ele) {
    var style = null;
    
    // 优先检查标准 API
    if (window.getComputedStyle) {
        style = window.getComputedStyle(ele, null);
    } else {
        // 降级处理：IE 8 及以下
        style = ele.currentStyle;
    }
    
    return style;
}

这个函数会返回一个具有高度相似接口的样式对象集合（在大多数情况下，你可以像操作普通 JS 对象一样读取属性值，尽管不同浏览器的底层实现略有差异）。如果你只需要获取某个具体值，可以在返回后再调用对应的读取方法。

总结

原生 JavaScript 中读取元素样式并非只有一种路径。
1. 如果是修改行内样式，直接用 ele.style。
2. 如果是现代项目，使用 window.getComputedStyle 配合 getPropertyValue 或驼峰属性读取是最稳妥的方式。
3. 如果涉及遗留系统维护，必须通过判断加入 currentStyle 作为 fallback。

JQuery 的 .css() 方法底层正是运用了类似的逻辑来屏蔽不同环境的差异。掌握这些原生 API，能让你在前端工程化开发中更加游刃有余地控制页面元素表现。