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

在网页开发中，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 文件中的规则无效。

壁纸样机神器

免费壁纸样机生成

0

查看详情

例如：

<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 属性来获取完整样式。

4. 实际案例：判断元素是否可见

通过获取 display 和 visibility 判断元素是否在页面中显示。

function isVisible(element) {
  const style = window.getComputedStyle(element);
  return style.display !== ‘none’ && style.visibility !== ‘hidden’;
}

const box = document.getElementById(‘testBox’);
if (isVisible(box)) {
  console.log(‘元素可见’);
} else {
  console.log(‘元素不可见’);
}

5. 获取带单位的数值与转换为数字

getComputedStyle 返回的值通常是带单位的字符串，如 “100px”、”1.5em”。若需进行数学运算，应先转为数字。

const widthStr = window.getComputedStyle(box).width; // “200px”
const widthNum = parseFloat(widthStr); // 200

注意：对于相对单位（如 em、%），其计算结果基于上下文，parseFloat 后仅保留数值部分。

基本上就这些。掌握 getComputedStyle 是关键，它能准确反映浏览器渲染后的样式状态，适用于大多数实际场景。