clientWidth、offsetWidth等介绍[通俗易懂]

clientWidth、offsetWidth等介绍[通俗易懂]网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:do…

大家好,又见面了,我是你们的朋友全栈君。

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width – border

clientHeight = height – border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163035.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • git clone 显著提速,解决Github代码拉取速度缓慢问题[通俗易懂]

    git clone 显著提速,解决Github代码拉取速度缓慢问题[通俗易懂]对于国内用户来说,搬砖遇到clone Github速度十分缓慢的问题实在是一个令人头疼崩溃的问题。下面就介绍一个简单的方法很好的解决这个问题。方法:   1、注册码云账号   传送门   2、注册完成后点击页面右上角的“+” 号,选择新建项目创建新项目     3、在新页面中选择“导入已有项目”导入已有项目    4、复制需要导…

  • Python求逆矩阵_3x3下三角矩阵求逆矩阵

    Python求逆矩阵_3x3下三角矩阵求逆矩阵1:导入包numpy  fromnumpyimport*2:定义初始化矩阵  a1=mat([[3,4],[2,16]])  //这是一个2×2的矩阵3:求a1的逆矩阵  a2=a1.I  

  • springboot 事务配置

    springboot 事务配置1、全局配置@EnableTransactionManagement@Aspect@ConfigurationpublicclassGlobalTransactionConfig{//写事务的超时时间为10秒privatestaticfinalintTX_METHOD_TIMEOUT=10;//restful包下所有service包或者service的子包的任意类的任意方法privatestaticfinalStringAOP

  • 拓扑图怎么看_拓扑排序算法图解

    拓扑图怎么看_拓扑排序算法图解一条单向的铁路线上,依次有编号为 1, 2, …, n 的 n 个火车站。每个火车站都有一个级别,最低为 1 级。现有若干趟车次在这条线路上行驶,每一趟都满足如下要求:如果这趟车次停靠了火车站 x,则始发站、终点站之间所有级别大于等于火车站 x 的都必须停靠。(注意:起始站和终点站自然也算作事先已知需要停靠的站点)例如,下表是 5 趟车次的运行情况。其中,前 4 趟车次均满足要求,而第 5 趟车次由于停靠了 3 号火车站(2 级)却未停靠途经的 6 号火车站(亦为 2 级)而不满足要求。现有 m

  • Spring Aop、拦截器、过滤器的区别[通俗易懂]

    Spring Aop、拦截器、过滤器的区别[通俗易懂]Spring Aop、拦截器、过滤器的区别

  • ebpf教程_宝马F底盘编程

    ebpf教程_宝马F底盘编程eBPF入门之编程•Feiskyhttps://feisky.xyz/posts/2021-01-29-ebpf-program/目录BCClibbpf-bootstrap内核源码小结eBPF提供了强大的跟踪、探测以及高效内核网络等功能,但由于其接口处于操作系统底层,新手入门起来还是有很大难度,特别是如何编写eBPF程序是入门的一大难点。本文将介绍一些常用的eBPF编程框架。BCC上篇文章介绍的BCC其实就提供了对eBPF的封装,前端提供Python

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号