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

获取浏览器宽高和坐标

作者: 苍老师的眼泪 | 来源:发表于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;

相关文章

  • 获取浏览器宽高和坐标

    屏幕的分辨率(基本上没什么屌用)image.png 可用高度(也就是屏幕高度减去任务栏的高度)image.png ...

  • 获取宽高、加载(DOM)、currentStyle、getCom

    鼠标在可视区中的坐标 获取可视区宽高 获取滚动距离 获取内容宽高 获取盒子模型宽高 获取元素的相对位置 获取元素的...

  • web前端常见问题总结:(持续更新)

    一、常见的关于浏览器宽高相关问题: 1. 获取浏览器的宽高,不包括工具栏和滚动条即可视区的宽高 1)对于IE9+、...

  • 获取屏幕各种宽高的方法

    js 获取屏幕各种宽高的方法(浏览器兼容) 屏幕的有效宽高: window.screen.availHeightw...

  • 自定义View(待整理)

    1.坐标系 View获取自身宽高 getHeight():获取View自身高度 getWidth():获取View...

  • 如何正确获取View的宽高

    在onCreate中是获取不到View的宽高以及坐标的。使用View.post(Runnable)可以获取:

  • Android View 体系

    1.屏幕宽高的获取 2.View坐标体系 2.1 View坐标的含义 View的getHeight,getWidt...

  • 兼容处理

    谷歌浏览器获取滚动高度宽度方式 ie 获取方式 因此兼容处理这样写 获取浏览器窗口宽高 平幕高度 阻止冒泡 阻止浏...

  • 获取浏览器宽高

    IE: document.body.clientWidth ==> BODY对象宽度 document.body...

  • 2. 浏览器控制

    控制浏览器窗口大小——WebDriver设置当前窗口的宽或高 获取当前窗口的宽和高 控制浏览器后退、前进,刷新浏览器

网友评论

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

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