专栏首页python-爬虫js获取屏幕以及元素宽高的方法

js获取屏幕以及元素宽高的方法

一.window相关

网页正文部分上:window.screenTop 
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth 

二.body相关

网页可见区域宽:document.body.clientWidth 
网页可见区域高:document.body.clientHeight 
网页可见区域宽:document.body.offsetWidth (包括边线的宽) 
网页可见区域高:document.body.offsetHeight (包括边线的宽) 
网页正文全文宽:document.body.scrollWidth 
网页正文全文高:document.body.scrollHeight 
网页被卷去的高:document.body.scrollTop 
网页被卷去的左:document.body.scrollLeft

三.滚动相关

scrollHeight: 获取对象的滚动高度。
scrollWidth:  获取对象的滚动宽度 

document.documentElement.scrollTop 垂直方向滚动的值 

四.位置精确定位

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

五.坐标轴

event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标

六.width/clientWidth/offsetWidth以及height之间区别

width是指可见内容的宽
height是指可见内容的高
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • django中CBV

    当请求过来的时候, 会优先判断你的请求方法是GET还是POST, 如果是GET请求的话, 走GET函数, 反之, 走POSt函数

    小小咸鱼YwY
  • Fiddler手机抓包设置

    IOS:设置 —> 通用 —> 关于本机 —> 受信任证书存储区,找到需要安装的证书,安装即可。

    小小咸鱼YwY
  • git忽略上传文件git忽略上传文件

    小小咸鱼YwY
  • Js窗体window大小设置(转)

    网页可见区域宽:document.body.offsetWidth (包括边线的宽) 

    山河木马
  • DllMain中不当操作导致死锁问题的分析——DllMain中要谨慎写代码(完结篇)

            之前几篇文章主要介绍和分析了为什么会在DllMain做出一些不当操作导致死锁的原因。本文将总结以前文章的结论,并介绍些DllMain中还有哪些操...

    方亮
  • ​Python基础知识点梳理6,推荐收藏

    今天整理的文章是Python的线程,线程在高级编程语言中是一个重点也是难点,今天我们一起看看Python的线程操作。

    叫我龙总
  • 进程、线程、锁的概念

    上周五终于改好bug,想着把代码同步到个人GitHub上面,就随手 git push同步到远程。然而万万没想到,之前 touch过一个 information....

    小一
  • 基本概念1 同步和异步2 阻塞和非阻塞3 5.死锁(Deadlock),饥饿(Starvation)和活锁(Livelock)

    JavaEdge
  • ice中间件常见配置说明

    多线程意味着,来自客户的多个调用可以在服务器中并发执行。事实上,在同一个servant 中,以及在同一servant 的同一个操作中,都可以有多个请求在并行执...

    用户5166556
  • Python初学——多线程Threading

    接着上篇继续跟着沫凡小哥学Python啦 1.1 什么是多线程 Threading 多线程可简单理解为同时执行多个任务。 多进程和多线程都可以执行多个任务,线程...

    闪电gogogo

扫码关注云+社区

领取腾讯云代金券