首页 > 其他 > 详细

获取窗口属性、元素几何尺寸

时间:2020-07-12 11:20:07      阅读:56      评论:0      收藏:0      [点我收藏+]

1、查看滚动条的滚动距离

  (1)

    IE9以下不兼容

    window.pageXOffset:查看滚动条水平方向滚动的距离

    window.pageYOffset:查看滚动条垂直方向滚动的距离

  (2)

    document.body/documentElement.scrollLeft/scrollTop

    兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值

    var  scrollLeft  =  document.documentElement.scrollLeft  +  document.body.scrollLeft

    var  scrollTop=  document.documentElement.scrollTop  +  document.body.scrollTop

2、查看视口的尺寸

  (1)window.innerWidth、window.innerHeight

    IE9以下不兼容

  (2)document.documentElement.clientWidth、document.documentElement.clientHeight

    标准模式下,任意浏览器都兼容

  (3)document.body.clientWidth、document.body.clientHeight

    适用于怪异模式下的浏览器

3、查看元素的几何尺寸

  (1)el.getBoundingClientRect( )

    兼容性好、返回的结果不是实时的

    该方法返回一个对象,对象里面有left、top、right、bottom、width、height属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角X和Y坐标

  (2)el.offsetWidth、el.offsetHeight

    

获取窗口属性、元素几何尺寸

原文:https://www.cnblogs.com/cuishuangshuang/p/13287227.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!