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


相关推荐

  • 图片批量重命名编号不带括号的_批量重命名不带括号

    图片批量重命名编号不带括号的_批量重命名不带括号如果你是一名摄影工作者,那么你的电脑里肯定会保存很多的图片,为了更好的整理和保存这些图片,比如一类主题的图片以相同文字命名并且编号,这样就方便以后查找了,解决办法有了,那么怎么给这么多图片命名并编号呢?必须是重命名的放大,这样可以一键修改文件名,但是这样修改后的图片名称虽然有编号,但是编号外面加了一层括号,比较难看,很多小伙伴不想要这个括号,所以今天小编就为大家详细介绍“图片批量重命名编号不要括号”的方法!需要用的工具软件:优速文件批量重命名工具软件下载地址:https://ww…

    2025年9月7日
    12
  • this关键字、this关键字应用

    this关键字、this关键字应用一 this 关键字 1 需求 使用 java 类描述一个动物 1 问题分析 存在同名的成员变量与局部变量时 在方法的内部访问的是局部变量 java 采取的是就近原则的机制访问的 2 内存分析 2 this 关键字代表了所属函数的调用者对象 解释 哪个对象调用这个函数 this 就代表哪个对象 3 this 关键字作用 1 如果存在同名成员变量与局部变量时 在方法内部默认是访问

    2026年3月16日
    2
  • javascript 幻灯片代码(含自动播放)「建议收藏」

    javascript 幻灯片代码(含自动播放)「建议收藏」HTMLcssJS

    2022年7月4日
    27
  • SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效

    SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效场景前端Vue的登录页面,验证码请求后台,后台生成验证码照片后使用Base64编码后,返回给前端,前端进行显示。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先看前端页面login.vue<el-form-itemprop=”code”><el-inputv-model=”log…

    2022年7月16日
    20
  • 多播 – 理解IP多播的工作原理

    多播 – 理解IP多播的工作原理原文链接 http www firewall cx networking topics general networking 107 network multicast html

    2026年2月15日
    2
  • Flume和Kafka的组合使用

    Flume和Kafka的组合使用在Windows系统中打开第1个cmd窗口,执行如下命令启动Zookeeper服务:cdC:\zookeeper\apache-zookeeper-3.7.1-bin.\bin\zkServer.cmd打开第2个cmd窗口,然后执行下面命令启动Kafka服务:cdC:\kafka_2.12-2.4.0\kafka_2.12-2.4.0.\bin\windows\kafka-server-start.bat.\config\server.properties打开第.

    2022年6月23日
    24

发表回复

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

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