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

获取非行间样式概述

本文主要介绍如何获取元素的非行间样式。

#div1 {
  width: 200px;
  height: 200px;
  background: red;
}

在 IE 浏览器中，可以通过元素的 currentStyle 对象来获取样式。例如，获取 id 为 div1 的元素宽度：var oDiv = document.getElementById('div1'); oDiv.currentStyle.width;

var oDiv = document.getElementById('div1'); 
oDiv.currentStyle.width;
Chrome/FF获取非行间样式
var oDiv = document.getElementById('div1');
oDiv.getComputedStyle(oDiv,false).width;

一种通用的兼容性写法是结合 IE 和标准浏览器的方法。首先判断 currentStyle 是否存在，若存在则使用它，否则使用 getComputedStyle。代码示例：var oDiv = document.getElementById('div1'); var eleWidth = oDiv.currentStyle && oDiv.currentStyle.width || getComputedStyle(oDiv,false).width;

var oDiv = document.getElementById('div1');
var eleWidth = oDiv.currentStyle && oDiv.currentStyle.width || getComputedStyle(oDiv,false).width;

为了增强代码的扩展性和复用性，可以将上述逻辑封装为一个函数。该函数接收元素对象和样式名作为参数，返回对应的样式值。代码示例：function getStyle(obj,name){ return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name]; }

function getStyle(obj,name){
  return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}

注意事项

注意：上述方法仅用于获取非行间样式，无法用于设置非行间样式的值。

以上介绍了 JavaScript 获取非行间样式的兼容性处理方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复大家！