JavaScript跨浏览器获取元素样式信息的方法与优先级

作者:小圆点时间:2026-10-23 09:59:34浏览:513

本文介绍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获取元素样式信息的核心内容,希望能为您的开发工作提供参考。

作者最新文章