手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

以下是手写兼容各种浏览器获取元素样式的JavaScript getStyle 函数的攻略，希望对您有用。

1. 函数定义

首先需要定义函数名称和参数，如下：

function getStyle(obj,attr){
  //函数体
}

其中 obj 是需要获取样式的元素节点对象；attr 是需要获取的样式属性名称。

2. 获取样式

由于在IE浏览器中，obj.style.attr 的方式只能获取通过行内样式设置的属性值，因此需根据浏览器的不同，采用不同的方式来获取元素的样式。

2.1. 在标准浏览器下的样式获取

在标准浏览器下，我们可以直接使用标准方法 getComputedStyle 来获取元素的样式值，如下：

if(window.getComputedStyle){
  return window.getComputedStyle(obj,null)[attr];
}

window.getComputedStyle 是用来获得样式的接口，有两个参数：要获取样式的元素以及一个伪元素。

2.2. 在旧版IE浏览器下的样式获取

在旧版IE浏览器中，我们可以使用元素的 currentStyle 属性来获取元素的样式，如下：

if(obj.currentStyle){
  return obj.currentStyle[attr];
}

obj.currentStyle 是用来获取元素计算样式的一个属性，与 getComputedStyle 相似，对应的样式名称可以使用驼峰式或中划线式。

3. 完整代码

综上，我们可以得出完整的 getStyle 函数代码如下：

function getStyle(obj, attr) {
  if (window.getComputedStyle) { // 标准浏览器下的样式获取
    return window.getComputedStyle(obj, null)[attr];
  } else if (obj.currentStyle) { // 旧版IE浏览器下的样式获取
    return obj.currentStyle[attr];
  }
}

4. 示例

下面提供两个示例，展示如何使用 getStyle 函数来获取元素的样式。

4.1. 获取元素宽度和高度

获取元素的宽度和高度可以使用 offsetWidth 和 offsetHeight 属性，这两个属性会加上元素的内边距和边框宽度，但不包括外边距和滚动条宽度。

var ele = document.querySelector(".box");
var width = parseInt(getStyle(ele, "width"));
var height = parseInt(getStyle(ele, "height"));
console.log("width:", width, "height:", height);

4.2. 获取元素内边距和边框宽度

获取元素的内边距和边框宽度可以使用 padding 和 border 系列属性，这些属性都受到不同浏览器的解析差异的影响。

var ele = document.querySelector(".box");
var paddingTop = parseInt(getStyle(ele, "paddingTop"));
var borderLeftWidth = parseInt(getStyle(ele, "borderLeftWidth"));
console.log("paddingTop:", paddingTop, "borderLeftWidth:", borderLeftWidth);

以上两个示例代码可以在控制台上执行并查看正确的输出结果。