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. python内置函数print输出到文件,实现日志记录的功能

    # bulid time 2018-6-22 import os import time def log(*args, **kwargs): # *kargs 为了通用 可不传 rule = &quo ...

  2. js常用代码收集

    1. PC - js 返回指定范围的随机数(m-n之间)的公式 Math.random()*(n-m)+m return false return false // event.preventDefa ...

  3. Js 处理 错误图片...(不用jquery)

    document.addEventListener("error", function (e) { var elem = e.target; if (elem.tagName.to ...

  4. POJ 2421 Constructing Roads（最小生成树）

    Description There are N villages, which are numbered from 1 to N, and you should build some roads su ...

  5. Helvetic Coding Contest 2016 online mirror A1

    Description Tonight is brain dinner night and all zombies will gather together to scarf down some de ...

  6. css雪碧图制作

    使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...

  7. linux中swap的构建

    一.使用物理分区构建swap 1.分区 [root@server3 ~]# fdisk /dev/vdb Welcome to fdisk (util-linux 2.23.2). Changes w ...

  8. python3 提取http请求response中的某个值

    在使用python3 request做接口测试的时候,想获取response的json中的某个值做断言时,发现request好像没有相关的方法 所以只好自己找写一个了.在我看来,json就是一个字典, ...

  9. 简述wcf应用

    一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...

  10. py---------面向对象基础篇

    引子 你现在是一家游戏公司的开发人员,现在你需要开发一款叫做<人猫大战>的小游戏,你就思考呀,人猫大战,那至少需要两个角色,一个是人,一个是猫,且人和猫有不同的技能,比如人拿棍打狗,狗可以 ...