JS获取非行间样式currentStyle与getComputedStyle兼容写法

行间样式与非行间样式的定义

所谓行间样式，是指直接定义在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非行间样式获取函数的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

JavaScript获取非行间样式的兼容方案

行间样式与非行间样式的定义

通过示例代码排查样式获取问题

兼容IE与其他浏览器的封装方案

实用工具推荐