1. clientWidth：表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。（clientWidth = width + padding）

2. offsetWidth：表示元素的内部宽度，以像素计。该属性包括内边距、垂直滚动条（如果有）、边框，但不包括外边距。（offsetWidth = width + padding + border + scroll）

3. clientLeft：左边框的宽度

4. offsetLeft：就是该元素的border到其父级的border（不包括border的宽度，在ie好像只包括父级的border的宽度）

5. clientX：鼠标相对于浏览器窗口可视区域的X坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这个属性

6. offsetX：鼠标相对于事件源元素（srcElement）的X坐标，只有IE事件有这个属性，标准事件没有对应的属性。

7. pageX：类似于event.clientX，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这个属性。

8. screenX：鼠标相对于用户显示器屏幕左上角的X坐标。标准事件和IE事件都定义了这个属性

在这里引用一下别人的图，嘻嘻嘻

理解clientWidth，offsetWidth，clientLeft，offsetLeft，clientX，offsetX，pageX，screenX的更多相关文章

  1. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  2. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  3. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  4. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  5. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  6. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

  7. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  8. event对象的clientX,offsetX,screenX,pageX

    chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clie ...

  9. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  10. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

随机推荐

  1. CTF-SSH私钥泄露渗透

    环境 Kali ip 192.168.56.102 Smb 靶机ip 192.168.56.104 0x01信息探测 使用netdiscover -r ip/mask 进行内网网段存活ip探测 靶机为 ...

  2. git 删除未提交的文件

    git checkout . && git clean -xdf

  3. Hello World ! 节日快乐！

    节日快乐! 世界你好,Hello World Java public class HelloWorld{ public static void main(String[] args) { System ...

  4. 安装Go语言及搭建Go语言开发环境

    一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境 下载 下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站(推荐):https://gol ...

  5. HDU 6112 今夕何夕 (预处理 枚举)

    中文题意都看的懂啦~ 思路很简单,就是通过前一天推出当天是星期几,直接枚举所有2017-9999年的每一天就好了.ㄟ( ▔, ▔ )ㄏ 代码: #include <cstdio> #def ...

  6. Linux面试题-7

    在日常管理中,通常CPU会影响系统性能的情况是: A A:CPU已满负荷地运转 B:CPU的运行效率为30% C:CPU的运行效率为50% D:CPU的运行效率为80% 下面那个命令可以终止一个用户的 ...

  7. Etcd安装和使用

    Etcd安装和使用 一.安装 1.1 二进制安装 从这里下载: etcd-v3.2.11-linux-amd64.tar.gz 下载包后解压即可运行: # 解压 tar zxvf etcd-v3.2. ...

  8. CodeForces - 1214D B2. Books Exchange (hard version)

    题目链接:http://codeforces.com/problemset/problem/1249/B2 思路:用并查集模拟链表,把关系串联起来,如果成环,则满足题意.之后再用并查集合并一个链,一个 ...

  9. WPF中的文本度量

    关于WPF中的文本度量,需要了解以下几个问题: WPF中支持一些常用的度量单位:px(device independent pixels).in(inches).cm(centimeters).pt( ...

  10. 如何利用C# Roslyn编译器写一个简单的代码提示/错误检查？

    OK, 废话不多说,这些天在写C#代码时突然对于IDE提示有了一些想法,之前也有了解过,不过并没有深入. 先看个截图: 一段再简单不过的代码了,大家注意看到 count 字段下面的绿色波浪线了吗,我们 ...