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

作者: jane_panyiyun更新于： 2020-03-21 21:10:43

　　一个较大的程序一般应分为若干个程序块，每一个模块用来实现一个特定的功能。所有的高级语言中都有子程序这个概念，用子程序实现模块的功能。

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

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

　　会有如下兼容性问题：

　　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);

　　};

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

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

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

　　functiongetStyle(element,attr){

　　//判断浏览器是否支持这个方法

　　returnwindow.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];

　　}

　　测试：

　　//测试

　　my$("btn").onclick=function(){

　　console.log(getStyle(my$("dv"),"top"));

　　};

　　在C语言中，子程序的作用是由一个主函数和若干个函数构成。由主函数调用其他函数，其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。