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

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • FAST_ICA MTALAB工具包下载/ICA分析/独立成分分析MATLAB安装包/ICA toolbox

    FAST_ICA MTALAB工具包下载/ICA分析/独立成分分析MATLAB安装包/ICA toolbox很多小伙伴在后台问我,MATLAB怎么进行独立成分分析(ICA)。一般来讲,ICA操作可以说是EEG里面十分总要的操作。EEGLAB这方面做的非常好,只需要RunICA就能很快的进行EEG的分析,但同样也有其弊端(懂得都懂)。这里,我提供了matlab中FAST_ICA的安装包,由于年代较较远,因此,支持的MATLAB版本可能比较老。而且网址必须外网连接,如果有直接想要安装包的小伙伴可直接关注我的公众号,回复FAST_ICA,便可免费领取。打个小广告,粉爷公众号大厂面经,刷题指南,脑…

    2022年5月13日
  • 鸿蒙系统下的搜狗输入法,搜狗输入法鸿蒙版app下载-搜狗输入法 鸿蒙版v10.28-PC6鸿蒙网…

    鸿蒙系统下的搜狗输入法,搜狗输入法鸿蒙版app下载-搜狗输入法 鸿蒙版v10.28-PC6鸿蒙网…搜狗输入法鸿蒙版app是一款高效手机输入法应用。搜狗输入法鸿蒙版app词库强大、流畅高效,还有表情包、语音变声、花样字等趣味功能。软件介绍搜狗输入法鸿蒙版app是一款打字超準、词库强大、主题美观、表情丰富,用了让您爱不释手的输入法应用。搜狗输入法鸿蒙版app拥有超大中文词库,输入更加精准,智能。搜狗智能旺仔带你用AI表达,斗图,妙语,输入更加有趣。功能介绍【搜狗专属超大词库】搜狗多年积累,超大中文…

    2022年7月13日
  • Mysql 备份的三种方式

    Mysql 备份的三种方式备份的本质就是将数据集另存一个副本,但是原数据会不停的发生变化,所以利用备份只能回复到数据变化之前的数据。那变化之后的呢?所以制定一个好的备份策略很重要。一、备份的目的做灾难恢复:对损坏的数据进行恢复和还原需求改变:因需求改变而需要把数据还原到改变以前测试:测试新功能是否可用二、备份需要考虑的问题可以容忍丢失多长时间的数据;恢复数据要在多长时间内完;恢复的时候是否需要持续提供服务;恢复的对象,是整个库,多个表,还是单个…

    2022年6月15日
  • KTT条件的理解「建议收藏」

    KTT条件的理解「建议收藏」求解优化问题:对于等式约束条件,使用拉格朗日乘子法求;对于不等式约束条件,使用KTT条件求解;这两种方法求得结果只是必要条件,只有当目标函数是凸函数时,才是充分必要条件。着重讲一下KTT条件求解如下优化问题:minxf(x)s.t.gi(x)≤0(j=1,…,n)minxf(x)s.t.gi(x)≤0(j=1,…,n)min_{x}f(x)\nonumber\\…

    2022年10月25日
  • 【Python】Jupyter在PyCharm中的使用

    【Python】Jupyter在PyCharm中的使用最近在学CS231n的课程,打算把作业做一下。由于官方给的例程是用的IPython,后缀名为ipynb,和之前接触的Python写法不一样,来记录一下自己今天踩到的一个坑。其实有一个很简单的解决方法就是安装Anaconda,我也不知道自己为什么要在PyCharm上死磕。步骤0安装Jupyterpipinstalljupyter1新建一个IPython文件这里

    2022年10月24日
  • 求矩阵的逆的三种方法

    求矩阵的逆的三种方法我们知道求矩阵的逆具有非常重要的意义,本文分享给大家如何针对3阶以内的方阵,求出逆矩阵的3种手算方法:待定系数法、伴随矩阵法、初等变换法(只介绍初等行变换)待定系数法求逆矩阵 1 首先,我们来看如何使用待定系数法,求矩阵的逆。 举例: 矩阵A= 12 -1-3 2 假设所求的逆矩阵为 ab cd 则 3 从而可以得出方程组 a+2c=1 b+2d=0 -a-3c=0 -b-3d=1

    2022年8月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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