JavaScript获取非行间样式的兼容方案
本文详解JavaScript中获取元素非行间样式的两种核心方法：IE专用的currentStyle与标准浏览器的getComputedStyle。通过封装兼容函数解决浏览器差异，实现跨浏览器准确读取CSS计算后样式，适用于需要动态读取元素实际渲染尺寸或样式的场景。
行间样式与非行间样式的定义
所谓行间样式，是指直接定义在HTML元素内部的style属性中的样式，例如:<div style="width:200px;"></div>。
非行间样式则是指定义在<style></style>标签或通过外部CSS文件引入的样式规则。
首先来看一段存在问题的示例代码。
通过示例代码排查样式获取问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
height: 100px;
width: 100px;
border: 2px solid black;
background: red;
}
</style>
<body>
<div id="div1" style="">
宽
</div>
</body>
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
oDiv1.style.width=200+'px';
}
}
</script>
</html> 在页面中放置一个具有红色背景和黑色边框的方块，期望通过点击该方块将其宽度修改为200px，但实际观察发现没有任何反应，且控制台未报错。
在事件处理函数中加入alert('a')可以正常弹出，说明onclick事件已被正确触发，问题出在后续逻辑上。
oDiv1.style.Width=200+'px'; 具体定位到修改样式的这行代码存在逻辑缺陷。
尝试打印该元素的样式变量以排查问题：
alert(oDiv1.style.Width); 尽管代码执行未抛出异常，但返回值显示为空白。即便将结果赋值给变量，依然无法获取到预期的样式值。根本原因在于style属性仅能读取行间样式，尝试读取非行间样式无效：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
</style>
<body>
<div id="div1" style="height: 100px;
width: 100px;
border: 2px solid black;
background: red;">
宽
</div>
</body>
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
oDiv1.style.width=200+'px';
}
}
</script>
</html> 由此确认问题源于行间样式与非行间样式的区别，实际上开发中不可能将所有样式都写在行间。
为解决此兼容性问题，需要引入两个关键属性：currentStyle和getComputedStyle(obj, false)。
currentStyle用于获取非行间（即当前生效）样式，这是IE浏览器的专属属性，Chrome和Firefox等浏览器不支持。
getComputedStyle(obj, false)用于获取非行间（即计算后的最终）样式，该方法在IE浏览器中不兼容。
兼容IE与其他浏览器的封装方案
<script type="text/javascript" >
window.onload =function(){
var oDiv1=document.getElementById('div1');
oDiv1.onclick=function(){
//FF、chrome
alert(getComputedStyle(oDiv1, false).width);
//IE
alert(oDiv1.currentStyle.width);
}
}
</script> 将上述逻辑封装为一个通用的公共函数：
//obj：哪个元素
//attr：那个样式
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyel[attr];
}else{
//FF
return getComputedStyle(obj, false)[attr];
}
} 通过判断obj.currentStyle是否存在真值，来区分当前浏览器是IE还是其他标准浏览器。
注意：属性访问时.width的写法可以替换为['width']这种方括号形式。
总结
以上所述是小编给大家介绍的JS非行间样式获取函数的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查
2026-11-05 17:30:30
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00