1： offsetLeft、offsetTop、offsetHeight、offsetWidth

  • 1.1 偏移参照——定位父级offsetParent

　   offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素

　　要理解offsetLeft、offsetTop、offsetHeight、offsetWidth ， 它们都是相对于offsetParent计算，主要分为下列几种情况 ：

    1. 元素自身有fixed定位，offsetParent的结果为null ; 当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null ； 备注：[注意]firefox浏览器有兼容性问题，返回<body>　　　　
    2. 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
    3. 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
    4. <body>元素的parentNode是null

　　

  • 1.2 计算方式见图：

　　

　　  备注：如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度

  • 1.3注意事项

　　【1】所有偏移量属性都是只读的

　　【2】如果给元素设置了display:none，则它的偏移量属性都为0

　　【3】每次访问偏移量属性都需要重新计算（避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能。）

2：clientHeight、clientWidth、clientTop、clientLeft

可视区大小client又称为可见大小或客户区大小，指的是元素内容及其内边距所占据的空间大小

　　

　　2.1   clientHeight

　　　　  clientHeight属性返回元素节点的可见高度

　　　　clientHeight = padding-top + height + padding-bottom

　　2.2   clientWidth

　　　　  clientWidth属性返回元素节点的可见宽度

　　　　clientWidth = padding-left + height + padding-right

　　　  [注意]滚动条宽度不计算在内

　    2.3   clientTop : 
　　　　返回上边框的宽度

　    2.4   clientLeft : 
　　　 返回左边框的宽度

　    2.５　注意事项 :
　　 【1】所有可视区client属性都是只读的
　　 【2】如果给元素设置了display:none，则可视区client属性都为0
　　 【3】每次访问可视区client属性都需要重新计算

3: scrollHeight、scrollWidth、scrollTop、scrollLeft

3.1 scrollHeight 元素的实际高度
3.2 scrollWidth 元素的实际宽度
3.3 scrollTop 如果出现y轴滚动条，那么就是 页面看不到的上边的高度
3.4 scrollLeft 如果x轴出现滚动条，那么就是 页面看不到的左边的宽度


4 : 事件 e 的一些距离

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象（自身）的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象（自身）的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

js中各种距离clientWidth的更多相关文章

  1. .net中判断距离高考多长时间的js函数

    在JS中判断距离高考(此处举例高考)的时间函数 JS中代码: function djs() { var severtime= new Date(); //获取服务器日期 var year=severt ...

  2. JS中各种宽度距离小结

    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...

  3. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  4. JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...

  5. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  6. 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法

    有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...

  7. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  8. document.body的一些用法以及js中的常见问题

    document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...

  9. js中不同的height, top的对比

    每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...

随机推荐

  1. 「产品经理全连接系列2」企业如何开展敏捷或DevOps的研发变革

    大家好,我是华为云的产品经理 恒少: 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数. 我希望可以借线上的平台,和用户持续交流 ...

  2. opencv-视频基本操作

    写视频 # encoding: utf-8 ''' @author: gaoyongxian666 @file: opencv_video_write.py @time: 2018/4/15 11:1 ...

  3. 去除掉svn目录

    使用svn提交时,造成有些文件锁住不能使用,百度得到下面相似问题以及解决方法: /*********************************************************** ...

  4. powdesigner建表

    默认打开powerDesigner时,创建table对应的自动生成sql语句没有注释. 方法1.comment注释信息 在Columns标签下,一排按钮中找到倒数第2个按钮:Customize Col ...

  5. Luogu P1608 路径统计 最短路计数

    颓了...重边导致我乖乖用邻接矩阵.... 好吧就是个最短路计数....如果更新时d[v]==d[u]+w[i],就可以接起来,把两个加在一起.. 如果d[v]>d[u]+w[i],那么c[v] ...

  6. hdu6440 Dream 2018CCPC网络赛C 费马小定理+构造

    题目传送门 题目大意: 给定一个素数p,让你重载加法运算和乘法运算,使(m+n)p=mp+np,并且 存在一个小于p的q,使集合{qk|0<k<p,k∈Z} 等于集合{k|0<k&l ...

  7. Codeforces 852D

    数目规模大,尝试转换为判定性问题,那么E就不影响到网络流的复杂度了 SPFA码歪了,WA了好几发气死了 #include<bits/stdc++.h> using namespace st ...

  8. HMAC算法加密

    /** * HMAC算法加密 * @param message 待加密信息 * @param key 密钥 * @return */ public static String HmacSHA256(b ...

  9. linux 远程装机

    首先,服务器配置dhcp  关闭火墙yum install dhcp -ycd   /etc/dhcpcp   /usr/share/doc/dhcp-4.2.5/dhcpd.conf.example ...

  10. C语言一些易混淆的概念

    ①数组指针和指针数组 1. 数组指针用于指向一个数组,数组名是数组首元素的地址(数组名为数组首元素类型且指向首元素的指针,如int array[5] ,array为指向array[0]的指针且类型为i ...