JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

时间:2023-03-08 17:15:14
JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

获取计算后的样式属性----获取一个元素任意一个样式属性值

获取元素距离左边位置的值

会有如下兼容性问题:
    my$("btn").onclick = function () {
//获取元素距离左边位置的值
console.log(my$("dv").offsetLeft); //谷歌,火狐支持
//console.log(window.getComputedStyle(my$("dv"),null).left);
//console.log(window.getComputedStyle(my$("dv"),null)["left"]); //IE8支持
//console.log(my$("dv").currentStyle.left);
};

获取任意一个元素的任意一个样式属性的值

因此封装一个兼容函数,判断浏览器是否支持再返回

//获取任意一个元素的任意一个样式属性的值
  function getStyle(element, attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

测试:

    //测试
my$("btn").onclick = function () {
console.log(getStyle(my$("dv"), "top"));
};