前端的小玩意（13）——获取DOM的位置相关信息

「爱情、让人受尽委屈。」 2022-07-15 15:49 140阅读 0赞

Github的DEMO地址：

https://github.com/qq20004604/some\_demo/tree/master/%E5%85%B3%E4%BA%8Eclient%E3%80%81offset%E3%80%81scroll%E7%9A%84%E8%AE%BE%E7%BD%AE

建议查看这个，阅读效果更好

**（35）获取DOM的位置相关信息**

引自：

[http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html][http_www.cnblogs.com_dolphinX_archive_2012_11_19_2777756.html]

前缀：

offset、client、scroll

后缀：

Width、Height、Left、Top

说明：

①clientWidth和clientHeight指盒模型内部的宽高，包含padding，不包含border（IE下包括，但可能看版本？）和margin，不包含滚动条；

②clientTop和clientLeft，指border的左边和上面高度；

③offsetLeft和offsetTop指border区域以外，距离页面左边和上面的距离（具体的说，假如窗口实际高度1000px，该元素的margin-top是150px，其父元素的margin-top是2225px，那么，offsetTop的值是2225，注意，2225覆盖了150的区域，所以150没有起效）

④offsetWidth和offsetHeight指包含border区域的盒模型大小（包含滚动条）；

⑤scrollWidth和scrollHeight是dom可滚动区域的宽和高（不包含border，包含滚动条）；最小值是dom的宽和高（带滚动条）；

⑥scrollTop和scrollLeft是dom当前滚动情况下，页面顶部距离实际顶部的高度和宽度。

[http_www.cnblogs.com_dolphinX_archive_2012_11_19_2777756.html]: http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP获取服务器端的相关信息

摘要：PHP获取服务端端的相关信息一：代码： <!DOCTYPE html> <html> <head> <title>第一个

淡淡的烟草味﹌/ 2024年02月17日 16:33/ 0 赞/ 65 阅读

相关 Python - 小玩意 - 当前鼠标位置

import os import time import pyautogui as pag try: while Tr

ゞ浴缸里的玫瑰/ 2023年10月16日 10:49/ 0 赞/ 19 阅读

相关前端的小玩意（3）禁止元素被选中

（28）禁止元素被选中在css的样式表里，添加这样属性（可兼容所有浏览器） { -moz-user-select: -moz-none;

傷城~/ 2022年09月21日 13:13/ 0 赞/ 201 阅读

相关前端的小玩意（4）自定义checkbox或者radio的外观

原理：通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去 CSS代码： .radio { /这个描述的是输入框的基本样式，透明，绝对定位，浮动在

「爱情、让人受尽委屈。」/ 2022年09月21日 13:13/ 0 赞/ 126 阅读

相关前端的小玩意（2）jQuery的选择器大全

(34)选择器 ①普通选择方法，略 ②选择其中的c，要求是b里的c <div class="a"> <div class="b">

╰+攻爆jí腚メ/ 2022年09月21日 11:38/ 0 赞/ 147 阅读

相关前端的小玩意（10）CSS3的:nth选择器

原文来源于： http://www.w3cplus.com/css3/pseudo-class-selector 的编号三给没有使用过人的说明： ①带

本是古典何须时尚/ 2022年07月15日 23:08/ 0 赞/ 174 阅读

相关前端的小玩意（13）——获取DOM的位置相关信息

Github的DEMO地址： https://github.com/qq20004604/some\_demo/tree/master/%E5%85%B3%E4%BA%8Ec

「爱情、让人受尽委屈。」/ 2022年07月15日 15:49/ 0 赞/ 141 阅读

相关 jax-ws 获取客户端相关信息

本博客转自 http://blog.csdn.net/z69183787/article/details/46884165，尊重原创 1. 基于JDK6 jax-ws开发

朱雀/ 2022年07月14日 02:43/ 0 赞/ 179 阅读

相关前端的小玩意(16)——在IE7的场景下，获取字符串的第n个字符

习惯于IE9和更高，最差也是IE8，因此从没遇见过这个问题。比如有字符串 var abc = "abc"; 如果你想获取第一个字符，那么我们一般人的反应是

淩亂°似流年/ 2022年06月18日 01:08/ 0 赞/ 117 阅读

相关前端的小玩意（16）——利用setter和getter实现数据校验

利用setter和getter实现数据校验写前端和后端的时候，往往要进行数据校验。例如：后端在处理数据之前，需要校验前端传过来的数据和后端要求的数据是否相符，以

Bertha 。/ 2022年06月09日 07:23/ 0 赞/ 232 阅读