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. django 学习之DRF (二)

    Django学习之DRF02 Serializer序列化器之反序列化操作    1.调⽤序列化器进⾏验证        0.准备序列化器 class BookInfoSerializer(serial ...

  2. CI框架源码学习笔记7——Utf8.php

    愉快的清明节假期结束了,继续回到CI框架学习.这一节我们来看看Utf8.php文件,它主要是用来做utf8编码,废话不多说,上代码. class CI_Utf8 { /** * Class const ...

  3. vm安装centos后unknown host问题和yum install安装不成功问题

    网上差了很多说要在vi /etc/sysconfig/network新增GATEWAY=192.168.0.1 还有vi /etc/sysconfig/network-scripts/ifcfg-et ...

  4. P3167 [CQOI2014]通配符匹配 题解

    题目 题目大意 给出一个字符串,其中包含两种通配符 ‘?’和 ‘*’ ,‘?’可以代替一个字符,‘*’可以代替一个字符串(长度可以为0) 然后给出几个字符转,判断能否用给出的字符串表示出来 样例解释 ...

  5. HashMap 1.8的源码分析二

    hashmap的构造方法: public HashMap(int initialCapacity, float loadFactor) { ) throw new IllegalArgumentExc ...

  6. 【记录一下】从0到1 我的python开发之路

    请设计实现一个商城系统,商城主要提供两个功能:商品管理.会员管理. 商品管理: - 查看商品列表 - 根据关键字搜索指定商品 - 录入商品 会员管理:[无需开发,如选择则提示此功能不可用,正在开发中, ...

  7. CSS3中的vh、vw及其应用场景

    需求:我们项目的需求是 一.vh   vw vw和vh是相对于视口(viewport)的宽度和高度.由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html ...

  8. apache 压缩 gzip

    配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...

  9. maven mirrorOf

    转载 http://blog.csdn.net/isea533/article/details/21560089 在maven中配置一个mirror时,mirror通常会设置成*,还有可能是一个具体的 ...

  10. 测试转型之路--学习ing

    http://www.importnew.com/27309.html 测试开发工程师 - 抖音方向 职位描述1.深度参与产品研发项目, 协同产品经理.业务研发.用户反馈团队优质交付产品:2.参与质量 ...