下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者: jane_panyiyun     来源: https://www.cnblogs.com/jane-panyiyun/p/12071285.html点击数:762发布时间: 2020-03-21 21:10:46

标签: window兼容函数程序

Web开发

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

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

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

  会有如下兼容性问题:

  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语言中,子程序的作用是由一个主函数和若干个函数构成。由主函数调用其他函数,其他函数也可以互相调用。同一个函数可以被一个或多个函数调用任意多次。

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程