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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 数据库概念结构设计_数据库设计阶段分为

    数据库概念结构设计_数据库设计阶段分为概念结构设计:将需求分析得到的用户需求抽象为信息结构(即概念模型)的过程。一、概念模型在需求分析阶段所得到的应用需求应该首先抽象为信息世界的结构,然后才能更改、更准确地用某一数据库管理系统实现这些需求。概念模型的主要特点:1.能真实、充分地反映现实世界,包括事物和事物之间的联系,能满足用户对数据的处理要求,是现实世界的一个真是模型。2.易于理解,可以用它和不熟悉…

    2022年10月12日
    5
  • linux默认关闭防火墙(win10永久关闭防火墙命令)

    Linux关闭防火墙命令问题:老是关闭防火墙太麻烦,所以选择彻底关闭防火墙,发现每次都记不住命令!特此记录

    2022年4月15日
    72
  • linux route 刷新_linux route命令详解

    linux route 刷新_linux route命令详解考试题一:linux下如何添加路由(百度面试题)以上是原题,老男孩老师翻译成如下3道题。a.如何用命令行方式给linux机器添加一个默认网关,假设网关地址为10.0.0.254?b.192.168.1.0网段,192.168.1.1网关的某一服务器想连入172.16.1.0/24段,该如何添加路由(奇虎360)c.如果添加一个主机路由?请分别解答。解答:route-net172.16.1.0…

    2022年7月18日
    37
  • zigbee协议栈工作流程 From zigbee菜鸟笔记(十 一)

    zigbee协议栈工作流程 From zigbee菜鸟笔记(十 一)一.ZigBee协议栈简介什么是ZigBee协议栈呢?它和ZigBee协议有什么关系呢?协议是一系列的通信标准,通信双方需要共同按照这一标准进行正常的数据发射和接收。协议栈是协议的具体实现形式,通俗点来理解就是协议栈是协议和用户之间的一个接口,开发人员通过使用协议栈来使用个协议的,进而实现无线数据收发。ZigBee的协议分为两部分,IEEE802.15.4定义了PHY(物理层)和MAC(介质访问层)技术规范;ZigBee联盟定义了NWK(网络层)、APS(应用程序支持子层)、APL(应用层

    2022年5月28日
    46
  • JS中indexOf的用法 「建议收藏」

    JS中indexOf的用法 「建议收藏」String.IndexOf(Char,[startIndex],[count]):返回指定字符在原字符串中的第一个匹配项的索引。可指定字符开始检索位置和指定长度的字符,若没有找到该字符,则返回

    2022年7月4日
    26
  • CPLD和FPGA的区别

    CPLD和FPGA的区别下面我们整理一下CPLD和FPGA的主要区别:1)CPLD的逻辑阵列更适合可重复编程的EEPROM或Flash技术来实现。而FPGA显然是利用SRAM技术更合适。2)由于是EEPROM或者Flash工艺决定了CPLD是有一定的擦写次数限制的。而FPGA在实际使用中几乎可以说是无配置次数限制。3)CPLD由于采用的是EEPROM或者Flash工艺所以配置掉电后不丢失,也就不需要外挂配置芯片。而FPGA采用的是SRAM工艺,配置在掉电后就没有了,因此需要一个外部配置芯片。4)CPLD的安

    2022年5月4日
    61

发表回复

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

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