JavaScript如何获取元素样式_JavaScript获取CSS样式属性方法与实际案例
答案：使用getComputedStyle获取元素最终样式。通过window.getComputedStyle(element)可读取元素在页面渲染后的实际样式值，返回包含所有CSS规则的只读对象，适用于判断显示状态、获取带单位的尺寸等场景，而element.style仅能访问行内样式，存在局限性。
在网页开发中，JavaScript 获取元素的样式是常见需求。直接通过 element.style 只能获取行内样式，无法读取 CSS 文件或 标签中定义的样式。要准确获取元素最终渲染后的样式，需要使用更可靠的方法。
1. 使用 getComputedStyle 获取计算样式
window.getComputedStyle() 是标准方法，用于获取元素应用所有 CSS 规则后的最终样式值。返回的是一个只读的 CSSStyleDeclaration 对象。
语法：
const style = window.getComputedStyle(element, [pseudoElt]);- element：目标 DOM 元素
- pseudoElt（可选）：伪元素，如 '::before' 或 '::after'
示例：
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 文件中的规则无效。
例如：
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 是关键，它能准确反映浏览器渲染后的样式状态，适用于大多数实际场景。
