JavaScript如何获取元素样式_JavaScript获取CSS样式属性方法与实际案例-js教程-PHP中文网

JavaScript如何获取元素样式_JavaScript获取CSS样式属性方法与实际案例

雪夜

发布： 2025-11-05 12:27:02

原创

541人浏览过

答案：使用getComputedStyle获取元素最终样式。通过window.getComputedStyle(element)可读取元素在页面渲染后的实际样式值，返回包含所有CSS规则的只读对象，适用于判断显示状态、获取带单位的尺寸等场景，而element.style仅能访问行内样式，存在局限性。

javascript如何获取元素样式_javascript获取css样式属性方法与实际案例

在网页开发中，JavaScript 获取元素的样式是常见需求。直接通过 element.style 只能获取行内样式，无法读取 CSS 文件或 <style> 标签中定义的样式。要准确获取元素最终渲染后的样式，需要使用更可靠的方法。

1. 使用 getComputedStyle 获取计算样式

window.getComputedStyle() 是标准方法，用于获取元素应用所有 CSS 规则后的最终样式值。返回的是一个只读的 CSSStyleDeclaration 对象。

语法：

const style = window.getComputedStyle(element, [pseudoElt]);

element：目标 DOM 元素
pseudoElt（可选）：伪元素，如 '::before' 或 '::after'

示例：

立即学习“Java免费学习笔记（深入）”；

const box = document.getElementById('myBox');
const computedStyle = window.getComputedStyle(box);
console.log(computedStyle.width); // 输出: "200px"
console.log(computedStyle.color); // 输出: "rgb(255, 0, 0)"

2. 使用 currentStyle（仅IE旧版本）

在 IE8 及更早版本中，不支持 getComputedStyle，可用 element.currentStyle 替代。

注意：现代开发中基本无需考虑此方式，但了解有助于维护老项目。

if (element.currentStyle) {
return element.currentStyle.width;
} else if (window.getComputedStyle) {
return window.getComputedStyle(element).width;
}

3. 直接访问 style 属性的局限性

element.style 只能获取 HTML 行内样式（即写在 style 属性中的内容），对 CSS 文件中的规则无效。

DeepSeek

幻方量化公司旗下的开源大模型平台

10435

查看详情

例如：

<div id="demo" style="width: 100px;"></div>

const el = document.getElementById('demo');
console.log(el.style.width); // "100px"（可以获取）
console.log(el.style.height); // ""（即使CSS设了height也拿不到）

所以不能依赖 style 属性来获取完整样式。