获取dom元素样式最常用的方法是使用window.getcomputedstyle()，1. 使用getcomputedstyle()可获取元素最终生效的所有css属性，包括外部样式表、内部样式和内联样式；2. 直接访问元素的style属性只能获取内联样式，无法读取外部或内部样式表中的样式；3. getpropertyvalue()方法可直接使用css属性名（如'background-color'）获取值，无需转换为驼峰命名；4. 获取css变量需通过getcomputedstyle()结合getpropertyvalue()，并传入变量名如'--primary-color'；5. 为提升性能，应缓存getcomputedstyle()结果，避免重复调用；6. 当样式动态改变时，必须重新调用getcomputedstyle()以获取最新样式值，缓存对象不会自动更新。综上，应根据场景选择合适方法，并注意性能优化与样式更新机制，以确保准确高效地获取元素样式。
获取DOM元素的样式，说白了就是读取元素当前生效的CSS属性值。这事儿在JavaScript里，可选择的路子还挺多的，但要根据具体情况选最合适的。
解决方案
最常用的方法是使用
window.getComputedStyle()。这个方法能获取到元素最终应用的所有CSS属性，包括通过CSS文件、
<style>标签以及内联样式设置的。
const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const backgroundColor = style.backgroundColor;
console.log(backgroundColor); // 例如：'rgb(255, 255, 0)'getComputedStyle()返回的是一个
CSSStyleDeclaration对象，你可以像访问普通对象属性一样访问CSS属性。需要注意的是，属性名要使用驼峰命名法，比如
background-color要写成
backgroundColor。
另一种方式是直接访问元素的
style属性。但是，这种方法只能获取到元素的内联样式，也就是直接写在HTML标签里的
style属性中的样式。
const element = document.getElementById('myElement');
const backgroundColor = element.style.backgroundColor;
console.log(backgroundColor); // 例如：'yellow'，如果内联样式设置了 background-color如果你的样式是通过CSS文件或
<style>标签定义的，
element.style是获取不到的。
还有一些不常用的方法，比如
currentStyle属性（IE特有，现在基本不用了）以及
getPropertyValue()方法。
const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const backgroundColor = style.getPropertyValue('background-color');
console.log(backgroundColor); // 例如：'rgb(255, 255, 0)'getPropertyValue()方法接收CSS属性名作为参数，返回对应的属性值。这种方式的好处是可以直接使用CSS属性名，不需要转换成驼峰命名法。
如何处理CSS变量？
CSS变量（也叫自定义属性）在现代Web开发中越来越常见。要获取CSS变量的值，需要结合
getComputedStyle()和
getPropertyValue()。
const element = document.documentElement; // 获取根元素，通常是<html>
const style = window.getComputedStyle(element);
const primaryColor = style.getPropertyValue('--primary-color');
console.log(primaryColor); // 例如：'#007bff'这里，
--primary-color是CSS变量的名字。注意，要获取定义CSS变量的元素，通常是根元素
document.documentElement或者定义变量的特定元素。
性能考虑：getComputedStyle()
真的慢吗？
关于
getComputedStyle()的性能，一直有一些争议。理论上，每次调用
getComputedStyle()都会重新计算元素的样式，这可能会带来性能问题。
但实际上，现代浏览器对
getComputedStyle()做了很多优化，性能瓶颈通常不在于这个方法本身，而在于频繁地操作DOM。
如果需要频繁地获取同一个元素的样式，可以考虑将
getComputedStyle()的结果缓存起来，避免重复计算。
const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element); // 缓存结果
function getCachedStyle(propertyName) {
return computedStyle[propertyName];
}
const backgroundColor = getCachedStyle('backgroundColor');
const fontSize = getCachedStyle('fontSize');样式改变后，如何实时获取最新的样式？
如果元素的样式是通过JavaScript动态改变的，你需要确保在样式改变后重新获取样式值。直接访问缓存的
computedStyle对象是不会更新的。
const element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);
function updateBackgroundColor(newColor) {
element.style.backgroundColor = newColor;
computedStyle = window.getComputedStyle(element); // 重新获取
}
updateBackgroundColor('red');
console.log(computedStyle.backgroundColor); // 现在是 'rgb(255, 0, 0)'每次改变样式后，都要记得更新
computedStyle对象，才能获取到最新的样式值。
总的来说，获取DOM元素的样式是一个看似简单，但实际上有很多细节需要注意的问题。选择合适的方法，了解性能影响，才能写出高效、可靠的代码。
