详解一下js中getComputedStyle()函数的用法

getComputedStyle()方法是JavaScript中用于获取元素最终渲染样式的核心功能之一。这个方法返回一个对象，其中包含了所有应用到指定元素上的最终计算后的样式属性。但对象以camelCase形式提供样式属性，而不是 CSS 中的 kebab-case 形式。

getComputedStyle()语法

var computedStyle = window.getComputedStyle(element, [pseudoElement]);

参数

element：获取样式的 DOM 元素。

[pseudoElement]：可选项，表示想要获取的伪元素的样式.

返回值

getComputedStyle()：返回一个camelCase形式的计算后的样式对象。

getComputedStyle()示例

// 获取 body 元素的最终样式
var computedStyle = window.getComputedStyle(document.body);
// 获取 body 元素的字体大小
var fontSize = computedStyle.fontSize; 
// 返回 '16px'
// 获取 body 元素的字体家族
var fontFamily = computedStyle.fontFamily; 
// 返回 'Arial, sans-serif'

注意事项

1、兼容性：getComputedStyle() 方法现代浏览器中已支付。如要兼容老的浏览器可以使用 currentStyle 属性。

2、伪元素：如果你需要获取指定伪元素的样式，可以在使用getComputedStyle()时包含伪元素。

例：
var pseudoStyle = window.getComputedStyle(element, '::before');

3、像素值：getComputedStyle()，返回的样式属性值通常是字符串形式。

例：16px 如果需要获取像素值，可以使用parseFloat函数。

var fontSize = parseFloat(computedStyle.fontSize); 
// 返回 16

4、camelCase 属性名：虽然 CSS 使用 kebab-case 属性名，但getComputedStyle()返回的样式对象中的属性名是使用 camelCase 格式。

总结，getComputedStyle()是 JavaScript 中一个非常有用的方法，特别是当你需要获取元素的最终样式，而不是它们的初始定义时。这在调试和开发过程中非常有帮助，因为它允许你查看实际应用到页面上的样式，而不是编写或定义的样式。