js中的scrollTop、offsetTop、clientTop
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的更多相关文章
- Js中 关于top、clientTop、scrollTop、offsetTop的用法
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- Js中 关于top、clientTop、scrollTop、offsetTop
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
- Js中 关于top、clientTop、scrollTop、offsetTop等
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js中的位置属性
原生js中位置信息 clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框),实测,clientLeft=左侧边框的宽度,clientTop=顶部边框的宽度 ...
- scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明
一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- js中不同的height, top的对比
每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...
- JS中各种宽度距离小结
js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
随机推荐
- AJAX简介(转)
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来表示信息: ...
- 单核、多线程与时间片,以Node.js为例
去年写了篇文章<线程与进程的理解>,当时认为线程和CPU的单核多核无关,操作系统可以有很多个线程.但今天看<深入浅出Node.js>一书时,多次提到单线程无法利用多核CPU一类 ...
- 【Cocos2d-x Lua】数据库封装类型的操作
Lua数据库封装类型的操作 使用演示样例 lua代码: require("DB") -- 保存一个字符串(数据库中存储的数据都是以字符串的形式保存的) DB:getInstance ...
- Matlab Tricks(三十) —— 任意区间的均匀分布
matlab 的内置函数 rand返回的是 0-1 区间上的均匀分布,rand的参数多是用于设置返回的矩阵的维度大小. 如果要得到 (a, b) 区间上的均匀分布,只需对其做简单的线性变换即可: a+ ...
- jscript的常用文件操作
作者:朱金灿 来源:http://blog.csdn.net/clever101 1.重命名文件 var fso = new ActiveXObject("Scripting.FileSys ...
- dot net core 使用 usb
原文:dot net core 使用 usb 本文告诉大家如何在 dot net core 使用 usb 目录 获得通知 读写 串口通信 LGPL 首先需要打开 Nuget 安装 CoreCompat ...
- sql操作xml小总结
一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...
- .net程序运行流程
程序员用.net开发的程序要在计算机上运行,首先程序经过编译后,会生成机器指令,一般以一个文件的形式保存,这个文件在外存储器上(存储器分外存与内存.外存:硬盘,U盘等:) 然后cpu会把硬盘上的文件读 ...
- node lesson5--async
https://github.com/alsotang/node-lessons/tree/master/lesson5 https://github.com/nswbmw/N-blog/wiki/% ...
- wxWidgets初学者导引(3)——wxWidgets应用程序初体验
wxWidgets初学者导引全目录 PDF版及附件下载 1 前言2 下载.安装wxWidgets3 wxWidgets应用程序初体验4 wxWidgets学习资料及利用方法指导5 用wxSmith ...