如何使用 JavaScript 获取页面样式计算属性-js教程-PHP中文网

javascript 获取页面元素计算样式主要用 window.getcomputedstyle() 方法，返回只读 cssstyledeclaration 对象，反映浏览器渲染后的实际值，支持伪元素和 getpropertyvalue() 等高效取值方式。

如何使用 javascript 获取页面样式计算属性

使用 JavaScript 获取页面元素的计算样式，主要依靠 window.getComputedStyle() 方法。它返回一个包含所有最终计算样式的 CSSStyleDeclaration 对象，反映浏览器实际渲染时应用的值（如将 em 转为像素、继承父级颜色等）。

获取元素的全部计算样式

调用 getComputedStyle() 时需传入目标 DOM 元素，可选第二个参数指定伪元素（如 ::before）：

第一个参数必须是已挂载到文档中的元素（不能是刚创建未 append 的节点）
返回对象是只读的，修改它不会影响真实样式
属性名使用驼峰写法（如 backgroundColor），也可用字符串索引（style['background-color']）

示例：

const el = document.querySelector('#myDiv');
const style = window.getComputedStyle(el);
console.log(style.fontSize);        // "16px"
console.log(style.backgroundColor); // "rgb(255, 0, 0)"
console.log(style.getPropertyValue('border-top-width')); // "2px"

获取单个计算样式属性值

避免遍历整个样式对象，直接读取特定属性更高效：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

推荐用 getPropertyValue('property-name')，支持短横线命名，语义清晰
也可用点语法（如 style.width），但注意部分属性名需驼峰化（zIndex、fontSize）
对复合属性（如 margin），返回的是最终计算出的单值（margin 本身不返回，但 marginTop 可以）

注意：display、visibility 等属性返回的是计算后的真实值，即使由 CSS 继承或层叠决定。

处理伪元素的计算样式

若需获取 ::before 或 ::after 的样式，把伪元素名称作为第二个参数传入：

const el = document.querySelector('.card');
const beforeStyle = window.getComputedStyle(el, '::before');
console.log(beforeStyle.content); // '"arrow"'（含引号）

伪元素必须在 CSS 中已定义 content 属性，否则返回空字符串或 none
无法获取未渲染的伪元素（例如 content: none 或未匹配的选择器）