Browser clientX scrollLeft clientLeft

简介:

1. clientHeight :  都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。 
2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 
3. scrollHeight,scrollWidth:不管有多少对象在页面上可见,他们得到的是整体. 
4. scrollLeft,scrollTop:如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0. 

5.event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标 

其它的相关:

scrollHeight: 获取对象的滚动高度(包括padding,不包括border )。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>豪情</title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<style type="text/css">

#c{position:absolute;width:200px;height:200px;border:20px solid #ccc;background:#fff;padding:10px;display:none;}

body{background:#eee;}

</style>

</head>

<body>

<div id="c">

x: <input type="text" name="" id="a" /><br />

y: <input type="text" name="" id="b" />

</div>

<script type="text/javascript">

var a = document.getElementById('a'), b = document.getElementById('b'), c = document.getElementById('c');

document.onmousemove = function(e) {

var e = e || window.event;

var x = e.clientX + document.documentElement.scrollLeft - document.body.clientLeft + 'px', y = e.clientY + document.documentElement.scrollTop + 'px';

//alert('x = ' + x + '\ny = ' + y);

a.value = x;

b.value = y;

c.style.display = 'block';

c.style.left = parseInt(x) + 20 + 'px';

c.style.top = parseInt(y) + 20 + 'px';

}

</script>

</body>

</html>

目录
相关文章
|
7月前
|
API 开发者
Navigator.sendBeacon()
Navigator.sendBeacon()
42 0
|
前端开发
前端 window 和 window.location
前端 window 和 window.location
前端 window 和 window.location
|
JavaScript 前端开发
18、DOM对象(window、screen、location、history、navigation)
18、DOM对象(window、screen、location、history、navigation)
96 0
为什么会有window.window这种设计
为啥要搞这个这个看起来貌似很奇葩的设计。 要解答这个问题,还得请出this,我们经常说浏览器中的全局对象是window, 这句话对了,也还没完全对。 全局对象的真实身份应该是全局作用域的this。 window只是为了便于访问this,弄出来的一个属性。
271 0
为什么会有window.window这种设计
解决popup不随着window一起移动的问题
原文:解决popup不随着window一起移动的问题 当我们设置Popup的StayOpen="True"时,会发现移动窗体或者改变窗体的Size的时候,Popup并不会跟随着一起移动位置。为了解决这个问题,可以给Popup定义一个附加属性,代码如下所示: /// /// Popup帮助类...
1042 0
|
Java Android开发 Python
|
JavaScript 前端开发 数据格式