javascript中offsetLeft，scrollLeft，offsetTop，scrollTop的用法

，scrollHeight: 获取对象的滚动高度，对象的实际高度
2，scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
3，scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
4，scrollWidth:获取对象的滚动宽度
5，offsetHeight:获取对象相对由父坐标 offsetParent 属性指定的父坐标的高度
6，offsetLeft:获取当前对象到其上级层左边的距离
7，offsetTop:获取当前对象到其上级层顶部的距离.
8，event.clientX 相对文档的水平座标
9，event.clientY 相对文档的垂直座标
10，event.offsetX 相对容器的水平坐标
11，event.offsetY 相对容器的垂直坐标
12，document.documentElement.scrollTop 垂直方向滚动的值
13，event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
14，clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离

下面的图片可能会帮你更好的理解：

具体的用法——例子:

 代码如下 复制代码
function getAbsLeft(e){
var l=e.offsetLeft;
while(e=e.offsetParent) l+=e.offsetLeft;
return l;
}
var e = document.getElementById("liuxiaofan");
getAbsLeft(e);

特别说明：这里用过e给函数传值只能通过getElementById的方法，用jQuery的$(“#liuxiaofan”)无效。

 

时间： 2024-09-12 08:02:51

javascript中offsetLeft，scrollLeft，offsetTop，scrollTop的用法的相关文章

javascript中DOM复选框选择用法实例

  本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 <html xmlns="http://www

javascript中DOM复选框选择用法实例_javascript技巧

本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l

javascript中parseInt()函数的定义和用法分析_javascript技巧

本文实例讲述了javascript中parseInt()函数的定义和用法.分享给大家供大家参考.具体分析如下: 此函数可以解析一个字符串,并返回一个整数. 语法结构: 复制代码 代码如下: parseInt(string, type) 参数列表: 参数 描述 string 必需.要被解析的字符串. type 可选.表示要解析的数字的基数,通俗的说就是数字的进制,比如二进制.八进制或者十六进制.该值介于2 ~ 36之间. 详细说明: 一.指定type参数: 指定type参数后,函数就会按照指定的t

详解 javascript中offsetleft属性的用法_javascript技巧

此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

Javascript中setTimeOut和setInterval的定时器用法

 Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等.但它们的应用是有区别的. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函

javascript中SetInterval与setTimeout的定时器用法_javascript技巧

示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi

Javascript中setTimeOut和setInterval的定时器用法_javascript技巧

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等.但它们的应用是有区别的. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数

javascript中关于break,continue的特殊用法与介绍_javascript技巧

今天在研究某系统时发现其代码有这样一个结构(已简化): 复制代码 代码如下: var result = false; point: { var obj = { key: 1 }; for (var key in obj) { // ... break point; } result = true; } alert(result); 咋看一下以为是代码错误,甚至于Visual Studio对此代码没办法进行正确的格式化.可是又仔细一看语意还是很清晰的,也就是从for循环内部break到指定的poi

javascript中select下拉框的用法总结_javascript技巧

本文针对开发项目中遇到的问题,进行了汇总问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="