美文网首页
获取浏览器宽高和坐标

获取浏览器宽高和坐标

作者: 苍老师的眼泪 | 来源:发表于2021-12-29 09:42 被阅读0次
    1. 屏幕的分辨率(基本上没什么屌用)


      image.png
    window.screen.width
    window.screen.height
    
    1. 可用高度(也就是屏幕高度减去任务栏的高度)


      image.png
    window.screen.availHeight
    window.screen.availWidth
    
    1. 浏览器可见区域的大小(不包括地址栏之类的,就算内容被撑开也不变)
      document.documentElement 就是 html 元素
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    
    1. body的大小
    document.body.clientWidth
    document.body.clientHeight
    

    坐标:

    • screenX/screenY: 位于屏幕左上角的坐标(基本上没什么屌用)
    • pageX/pageY:: 相对于浏览器可用区域(不包括地址栏之类的,加上页面滚动的距离)左上角的坐标,例子:
    • clientX/clientY: 相对于浏览器可用区域(不包括地址栏之类的,也不考虑滚动)左上角的坐标,例子:
    image.png
    • offsetX/offsetY:就是距离触发事件的元素的左上角(包括padding)的距离,简单实用,
      也可以用以下代码代替:
        const rect = 触发事件的对象.getBoundingClientRect();
        my_offsetx = e.clientX - rect.left;
        my_offsety = e.clientY - rect.top;
    

    相关文章

      网友评论

          本文标题:获取浏览器宽高和坐标

          本文链接:https://www.haomeiwen.com/subject/jpsmqrtx.html