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)
上一篇 2022年7月22日 下午5:00
下一篇 2022年7月22日 下午5:16


相关推荐

  • iocp详解_iocp是异步io吗

    iocp详解_iocp是异步io吗#include”SOCKET.h”#includeDWORDWINAPIThreadProc(LPVOIDpvParam);#definePORT8080#defineLISTEN_QUEUE200//AcceptEx和GetAcceptExSockaddrs的函数指针,用于调用这两个扩展函数LPFN_ACCEPTEX       

    2026年4月17日
    4
  • R6010 -abort() has been called错误分析及其解决方法

    R6010 -abort() has been called错误分析及其解决方法

    2022年1月30日
    72
  • android之在activity中控制另一个activity的UI更新_如何在activity之间传递handler

    遇到一个问题,需要在一个activity中控制另一个acitivity做一些更新,没想到传递handler的方法,通过以下方式解决。1.在MyAPP中定义属性handlerpackage jason.com;import jason.com.MasterActivity.MyHandler;import android.app.Application;/*** 自己

    2022年3月10日
    37
  • ID卡复制教程(使用T5577卡复制4100卡)

    ID卡复制教程(使用T5577卡复制4100卡)1ID卡的常见类型与区别国内常见的普通ID卡多为EM4100或EM4102卡,其特点是不可修改ID号。为了复制普通ID卡,通常采用T5577或EM4305卡(俗称ID白卡),其特点是内部EEPROM可读可写,修改卡内EEPROM的内容即可修改卡片对外的ID号,达到复制普通ID卡的目的。本文以T5577卡复制普通EM4100卡。读者需具备基本的电子DIY能力。多说一句,ID…

    2022年6月10日
    366
  • java多线程-学习总结(完整版)

    java多线程-学习总结(完整版)这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

    2022年7月7日
    20
  • 免费分享仿某妹网站地址发布页源码

    免费分享仿某妹网站地址发布页源码用于网址跳转,防止网址被封或者丢失用。做什么就不用我多说了!我看你们全部都要金币。。。我就免费分享给你们。下载地址:点击下载

    2022年5月9日
    46

发表回复

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

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