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. 「杂录」CQOI 2018 背板记

    背景 经过一天天的等待,终于迎来了\(CQOI2018\),想想\(NOIp\)过后到现在,已经有了快要半年了,曾经遥遥无期,没想到时间一转眼就过去了-- 日志 \(Day0\) 因为明天就要考试了, ...

  2. java：数据结构复习（三）链表队列

    @TOC 和栈一样,队列也是表,但是使用队列的特点是先进先出. 队列模型 队列的基本操作是入队,它是在表的末端插入一个元素,和出队,它是删除在表开头的一个元素 graph LR A[<kbd&g ...

  3. Exadata扩展

    所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...

  4. java 实现导出Excel文件

    java 实现导出Excel(java生成 excel 并导出文件) 经常有有一些数据需要导出成   excel  格式 ,所以就需要实现啦 开始: 1.加入jar poi-3.6-20091214. ...

  5. [USACO19FEB]Moorio Kart(DP)

    Luogu5243 题解 即O(N^2)暴力统计出每个森林的路径,从ctgn个集合中各选出一个数,使得长度>=Y的方案数. 用背包统计.具体实现: \(dp[i+j][0]\leftarrow ...

  6. Linux字符设备驱动--Led设备驱动

    ①驱动源码 #include <linux/module.h> #include <linux/init.h> #include <linux/cdev.h> #i ...

  7. ES6使用常量做为函数名

    重点是 要给常量加一个中括号 就是这么任性~ [SET_INFO](state) { state.userInfo = { name: cookie.getCookie('name'), token: ...

  8. JDK、JRE、JVM各自是什么、以及什么关系

    JDK:java开发工具包 JRE:java运行环境 JVM:java虚拟机 关系:         安装JDK时, JRE.JVM都安装上了 安装JRE时,也把JVM安装上了 JVM(不能单独安装) ...

  9. leetcode 627. Swap Salary 数据库带判断的更新操作

    https://leetcode.com/problems/swap-salary/description/ 用  set keyWord = Case depentedWord when haha ...

  10. IOS Intro - UIWindow UIView and CALayer

    UIWindow.UIView以及CALayer之间的关系2016-05-11 20:46 本站整理 浏览(16) UIWindow1.简介UIWindow是一种特殊的UIView,通常在一个app中 ...