js中的宽度、高度、偏移量问题，offset、client、scroll

经常把这几个搞混淆，根据《Javascript高级程序设计》第12章的内容简单总结下

1、offset，这个是偏移量，包括元素在屏幕上占用的所有可见的空间。包括所有内边距、滚动条和边框大小（注意：不包括外边距），有4个属性：offsetWidth、offsetHeight、offsetLeft、offsetTop。

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框高度。

• offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。

• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

• offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

  其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如，元素的offsetParent是作为其祖先元素的

  元素，因为是在DOM层次中距

  最近的一个具有大小的元素。 要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下函数可用于取得元素的左偏移量： 2、client，这个是客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth，clientHeight。 clientWidth：元素内容区宽度加上左右边距宽度； clientHeight：元素内容区高度加上上下边距高度。 从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。要确定浏览器视口大小，可以使用document.documentElement或document.body（在IE7之前的版本中）的clientWidth和clientHeight。 3、scroll，滚动大小，指的是包含滚动内容的元素的大小。有四个相关属性：scrollHeight、scrollWidth、scrollLeft、scrollTop。 scrollHeight：在没有滚动条的情况下，元素内容的总高度； scrollWidth：在没有滚动条的情况下，元素内容的总宽度； scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。 scrollWidth和scrollHeight主要用于确定元素内容的实际大小。例如，通常认为元素是在Web浏览器的视口中滚动的元素（IE6之前版本运行在混杂模式下时是元素）。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。 对于不包含滚动条的页面而言，scrollWidth和ScrollHeight与clientWidth和clientHeight之间的关系并不十分清晰。在这种情况下，基于document.documentElement查看这些属性会在不同浏览器间发现一些不一致性问题，具体参考高程 敲得太累了，贴个其他网友总结的： 网页可见区域宽：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 client scroll js java ip dom html web window 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 js JS兼容总结及解决方法 本文总结了在编写JS代码时，不同浏览器间的兼容性差异，并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细] 蜡笔小新   2023-12-09 17:31:06 js 前端人员必须知道的三个问题及其发展阶段 本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细] 蜡笔小新   2023-12-12 12:45:59 text 《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序 JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细] 蜡笔小新   2023-12-11 11:40:52 import 如何优化Webpack打包后的代码分割 本文介绍了如何通过优化Webpack的代码分割来减小打包后的文件大小。主要包括拆分业务逻辑代码和引入第三方包的代码、配置Webpack插件、异步代码的处理、代码分割重命名、配置vendors和cacheGroups等方面的内容。通过合理配置和优化，可以有效减小打包后的文件大小，提高应用的加载速度。 ... [详细] 蜡笔小新   2023-12-09 08:10:47 jsp AJAX的POST请求及实现数据修改功能的方法 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细] 蜡笔小新   2023-12-14 16:12:01 schema 如何使用Java获取服务器硬件信息和磁盘负载率 本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细] 蜡笔小新   2023-12-14 13:56:20 python Thrift教程初级篇——RPC框架Thrift的安装环境变量配置与第一个实例 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例，讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快，性能和稳定性也不错，适合初学者学习和使用。 ... [详细] 蜡笔小新   2023-12-13 17:36:52 python position属性absolute与relative的区别和用法详解 本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义，以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式，说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因，即以浏览器左上角为原始点进行定位，不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细] 蜡笔小新   2023-12-12 13:16:49 text 绕过WAF的XSS检测机制及构建XSS payload的方法 本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细] 蜡笔小新   2023-12-11 19:42:30 text 如何在HTML中获取鼠标的当前位置 本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细] 蜡笔小新   2023-12-11 13:04:00 jsp React基础篇一 - JSX语法扩展与使用 本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细] 蜡笔小新   2023-12-11 11:37:05 js 用Vue实现的Demo商品管理效果图及实现代码 本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细] 蜡笔小新   2023-12-10 15:14:25 js Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案 本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题，并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式，我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的，因此无需担心会话信息被覆盖的问题。需要注意的是，本文讨论的是多个客户端级别上的多用户登录，而非同一个浏览器级别上的多用户登录。 ... [详细] 蜡笔小新   2023-12-10 12:00:40 jsp 2015年九月八日js学习总结及相关知识点 本文介绍了2015年九月八日的js学习总结及相关知识点，包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后，并且对语句和注释的使用进行了说明。 ... [详细] 蜡笔小新   2023-12-10 11:10:08 python Jquery 跨域问题 为什么80%的码农都做不了架构师？JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。当然 ... [详细] 蜡笔小新   2023-12-09 18:24:55 爬树小羊_298 这个家伙很懒，什么也没留下！ Tags | 热门标签 spring text scala sum php7 bit range hashset substring js vba golang jsp usb search schema hashcode cSharp subset python tags eval php8 httpclient 数组 process dockerfile version import shell RankList | 热门文章 1webpack使用optimizecssassetswebpackplugin压缩css文件配置问题 2PRIMARY KEY 3如何发布WMS/WMTS离线地图服务 4Java GC详解1. 最全面的理解Java对象结构对象指针 OOPs 5Kubernetes（k8s）基础简介 6apache 职责链 7安卓中的刮刮卡视图，示例 8Salesforcesoql 多字段多值过滤查询思路 9Java复习小结（二）——面向对象 10【PythonFintech常见问题Q1】第9课需要下载哪些软件？是否还需要接入外部数据库？ 11设置开机启动_开机启动项怎么设置呢？ 12为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background? 13JavaHashMap按key（value）排序 14Linux入门到放弃之六《磁盘和文件系统管理二》 15关于学习MySQL的问题 PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有