scrollHeight:获取对象可滚动的高度。

scrollWidth:获取对象可滚动的宽度。

scrollTop:获取对象最顶端与对象可见区域最顶端的距离。

scrollLeft:获取对象左边界与对象可见区域左边界的距离。

offsetHeight:获取对象在页面中的高度(height + padding + border)。

offsetWidth:获取对象在页面中的宽度(width + padding + border)。

offsetTop:获取对象最顶端相对于页面最顶端的距离(以border为边界)。

offsetLeft:获取对象左边界相对于页面左边界的距离(以border为边界)。

clientHeight:获取对象在页面中的高度(width + padding)。

clientWidth:获取对象在页面中的宽度(width + padding)。

clientTop:获取对象最顶端相对于页面最顶端的距离(以padding为边界)。

clientLeft:获取对象左边界相对于页面左边界的距离(以padding为边界)。

event.clientX:获取当前事件触发时鼠标指针相对于窗口的水平坐标。

event.clientY:获取当前事件触发时鼠标指针相对于窗口的垂直坐标。

event.offsetX:获取当前事件触发时鼠标指针相对于容器的水平坐标。

event.offsetY:获取当前事件触发时鼠标指针相对于容器的垂直坐标。

event.screenX:获取当前事件触发时鼠标指针相对于显示屏的水平坐标。

event.screenY:获取当前事件触发时鼠标指针相对于显示屏的垂直坐标。

js中的scrollTop、offsetTop、clientTop的更多相关文章

  1. Js中 关于top、clientTop、scrollTop、offsetTop的用法

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  2. Js中 关于top、clientTop、scrollTop、offsetTop

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  3. Js中 关于top、clientTop、scrollTop、offsetTop等

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  4. js中的位置属性

    原生js中位置信息 clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框),实测,clientLeft=左侧边框的宽度,clientTop=顶部边框的宽度 ...

  5. scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

    一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...

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

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

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

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

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

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

  9. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

随机推荐

  1. AJAX简介(转)

    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来表示信息: ...

  2. 单核、多线程与时间片,以Node.js为例

    去年写了篇文章<线程与进程的理解>,当时认为线程和CPU的单核多核无关,操作系统可以有很多个线程.但今天看<深入浅出Node.js>一书时,多次提到单线程无法利用多核CPU一类 ...

  3. 【Cocos2d-x Lua】数据库封装类型的操作

    Lua数据库封装类型的操作 使用演示样例 lua代码: require("DB") -- 保存一个字符串(数据库中存储的数据都是以字符串的形式保存的) DB:getInstance ...

  4. Matlab Tricks(三十) —— 任意区间的均匀分布

    matlab 的内置函数 rand返回的是 0-1 区间上的均匀分布,rand的参数多是用于设置返回的矩阵的维度大小. 如果要得到 (a, b) 区间上的均匀分布,只需对其做简单的线性变换即可: a+ ...

  5. jscript的常用文件操作

    作者:朱金灿 来源:http://blog.csdn.net/clever101 1.重命名文件 var fso = new ActiveXObject("Scripting.FileSys ...

  6. dot net core 使用 usb

    原文:dot net core 使用 usb 本文告诉大家如何在 dot net core 使用 usb 目录 获得通知 读写 串口通信 LGPL 首先需要打开 Nuget 安装 CoreCompat ...

  7. sql操作xml小总结

    一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...

  8. .net程序运行流程

    程序员用.net开发的程序要在计算机上运行,首先程序经过编译后,会生成机器指令,一般以一个文件的形式保存,这个文件在外存储器上(存储器分外存与内存.外存:硬盘,U盘等:) 然后cpu会把硬盘上的文件读 ...

  9. node lesson5--async

    https://github.com/alsotang/node-lessons/tree/master/lesson5 https://github.com/nswbmw/N-blog/wiki/% ...

  10. wxWidgets初学者导引(3)——wxWidgets应用程序初体验

    wxWidgets初学者导引全目录   PDF版及附件下载 1 前言2 下载.安装wxWidgets3 wxWidgets应用程序初体验4 wxWidgets学习资料及利用方法指导5 用wxSmith ...