本文介绍JavaScript中跨浏览器获取元素样式信息的通用方法，涵盖动态设置、内联样式、样式表及浏览器默认值的优先级判定。通过解析currentStyle与getComputedStyle的使用场景，帮助开发者准确获取计算后的样式值，解决不同浏览器间的兼容性问题。
JavaScript跨浏览器获取元素样式的方法
在Web开发中，获取元素的样式信息需要一种跨浏览器的兼容方案。
function getStyle(elem, cssprop, cssprop2){
if(elem.currentStyle){
return elem.currentStyle[cssprop]
}else if(document.defaultView && document.defaultView.getComputedStyle){
return document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssprop2)
}else{
return null
}
}
<style>
#elem{font-size:23px;}
</style>
<input id ="elem" style="font-size:18px;"/>
<script>
elem.style.fontSize = '12px';
console.log(getStyle(elem, "fontSize", "font-size"))
// 输出12px
</script>样式获取的优先级判定
使用getStyle函数获取样式值时，其判定遵循特定的优先级顺序：
首先是动态设置的样式，即通过JavaScript直接修改DOM元素style属性所设定的值。
其次是内联设置的样式，即HTML标签中style属性直接定义的CSS规则。
再次是外部或内部样式表中定义的CSS规则，即通过<link>或<style>标签引入的样式。
最后是浏览器默认设置的样式，即浏览器内置的默认CSS行为。
以上便是关于JavaScript获取元素样式信息的核心内容，希望能为您的开发工作提供参考。