码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-12 10:37:16      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:浏览器   otto   尺寸   off   document   fse   tom   font   ros   

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

    

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

标签:浏览器   otto   尺寸   off   document   fse   tom   font   ros   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!