JavaScript获取非内联样式：currentStyle与getComputedStyle区别

样式的分类与作用域

CSS 样式通常分为三种应用方式，其作用范围和优先级各不相同：

• 内嵌样式 (Inline Style)：直接在 HTML 标签的 style 属性中编写，仅对当前标签有效，优先级最高。
• 内部样式 (Internal Style Sheet)：定义在 <head> 部分的 <style> 标签内，作用于当前网页文档。
• 外部样式表 (External Style Sheet)：保存在独立的 .css 文件中，通过 <link> 引用，实现多页面复用和维护分离。

当通过 JavaScript 操作 DOM 时，若直接使用 element.style.property，仅能读到第一步中的内联样式。对于后两种情况定义的样式，需要借助特定的浏览器 API。

核心解决方案：浏览器差异分析

为了准确获取元素最终的渲染样式，了解以下三个关键概念及其浏览器支持情况至关重要：

第1步：理解样式对象的关系

• style：标准的 CSSStyleDeclaration 对象，反映内联样式。它是可写的，用于修改元素当前状态。
• runtimeStyle：运行时样式对象，专用于 IE。它定义了强制应用的样式，若设置会覆盖 style 中的值，具有极高的优先级。
• currentStyle：IE 专属属性，是 style 和 runtimeStyle 的结合体，且包含了最终继承和计算后的样式值。它只读，用于获取样式。

第2步：标准浏览器的替代方案

在非 IE 的主流浏览器（如 Firefox, Chrome, Safari 等）中，不存在 currentStyle。W3C 标准推荐使用 getComputedStyle() 方法来获取元素经过 CSS 层叠计算后的最终样式。

该方法接受两个参数：getComputedStyle(element, pseudoElt)。element 为待查询的元素；pseudoElt 通常传 null，若要查询伪元素（如 ::before）则传入字符串（如 "::after"）。

代码实战：跨浏览器兼容写法

结合上述原理，封装一个能够同时兼容 IE 和其他现代浏览器的函数是实际开发的最佳实践。以下是具体操作步骤和代码示例。

// 假设 DOM 元素已存在，ID 为 'mydiv'
var mydiv = document.getElementById('mydiv');
var width = '';

// 1. 检测是否为 IE 浏览器 (较旧版本的判断逻辑)
if (mydiv.currentStyle) {
    // IE 9及以下及部分模式支持 currentStyle
    width = mydiv.currentStyle['width'];
} 
// 2. 检测是否为标准浏览器 (Chrome, Firefox, IE9+, etc.)
else if (window.getComputedStyle) {
    // 返回的是一个 CSSStyleDeclaration 对象
    var computedStyle = window.getComputedStyle(mydiv, null);
    width = computedStyle['width'];
}

console.log('最终宽度:', width);

注意事项与细节补充

1. 访问方式：在某些情况下，CSS 属性名为驼峰式（如 fontSize），而在 getComputedStyle 的返回值中访问键名通常需要保持原样或使用短横线名称（如 'font-size'）。建议统一使用中括号加引号的写法以兼容所有场景。
2. 其他等价写法：在 Firefox 等早期 Gecko 内核浏览器中，也可通过 document.defaultView.getComputedStyle(mydiv, null).width 获取，这与 window.getComputedStyle() 效果一致。
3. 性能考量：getComputedStyle 涉及重排重绘计算，如果频繁调用，可能影响页面性能。建议在初始化阶段获取并缓存数值，避免在滚动或高频交互事件循环中重复调用。

完整测试用例演示

下面是一个包含 HTML 结构和 JS 脚本的最小化测试案例。用户点击按钮后，脚本将弹出提示框显示该元素的有效宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS获取非内联样式测试</title>
    <style>
        /* 外部/内部样式定义 */
        #testDiv {
            width: 50%;
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>

    <div id="testDiv">这是一个测试块</div>
    <br/>
    <button onclick="checkWidth()">查看宽度</button>

    <script>
        function checkWidth() {
            var el = document.getElementById("testDiv");
            var w = "";

            if (el.currentStyle) {
                w = el.currentStyle["width"];
            } else if (window.getComputedStyle) {
                w = window.getComputedStyle(el, null)["width"];
            }

            alert("当前元素计算后的宽度为：" + w);
        }
    </script>
</body>
</html>

以上就是 JavaScript 读取非内联样式 currentStyle 与 getComputedStyle 区别的详细内容，更多关于前端兼容性处理与 DOM 操作的资料请关注本站其它相关文章！