原生js获取样式

在原生JavaScript中获取元素的样式可以通过window.getComputedStyle()方法。这个方法返回一个对象，包含了当前元素所有应用在它上面的CSS属性和值，包括从内联样式、内部样式表、外部样式表以及浏览器默认样式中继承的样式。

基本用法

var element = document.getElementById('myElement');
var style = window.getComputedStyle(element);

获取特定样式属性

var color = style.getPropertyValue('color'); // 获取颜色属性
var fontSize = style.getPropertyValue('font-size'); // 获取字体大小属性

优势

• getComputedStyle方法能够获取到元素当前应用的所有样式，包括从外部样式表和浏览器默认样式中继承的样式。
• 返回的样式值都是经过计算的，比如长度单位会被转换为像素值。

应用场景

• 动态获取元素样式并进行修改。
• 判断元素当前应用了哪些样式，以便进行后续操作。
• 实现一些动态效果，比如根据元素当前的颜色来改变其他元素的样式。

注意事项

• getComputedStyle返回的样式值都是只读的，不能直接修改。如果需要修改元素样式，应该使用element.style属性。
• getComputedStyle方法返回的样式值都是经过计算的，可能与原始样式表中的值有所不同。比如，如果原始样式表中设置了一个相对单位（如em或rem），getComputedStyle返回的值可能会是一个绝对单位（如px）。
• 对于一些特殊的CSS属性，比如background-image或border-image，getComputedStyle可能无法正确获取其值。这时可以使用element.currentStyle属性（仅限IE浏览器）或者通过其他方式获取。

解决问题的方法

如果在获取样式时遇到问题，可以尝试以下方法：

1. 确保元素已经被正确加载到DOM中，否则可能无法获取到样式。
2. 检查要获取的样式属性名是否正确，CSS属性名是区分大小写的。
3. 如果需要兼容旧版IE浏览器，可以考虑使用element.currentStyle属性来获取样式，但需要注意这个属性只适用于IE浏览器。
4. 如果遇到特殊CSS属性无法获取的情况，可以尝试通过其他方式获取，比如解析元素的style属性或者使用第三方库来获取样式。