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>

posted @ 2010-08-07 17:00 豪情阅读(1150) 评论(0) 编辑收藏举报

刷新页面返回顶部

Browser clientX scrollLeft clientLeft

公告