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>

目录
相关文章
|
2月前
|
存储 缓存 监控
|
5月前
|
存储 安全 开发者
|
API 开发者
Navigator.sendBeacon()
Navigator.sendBeacon()
118 0
|
容器 数据采集 算法
解决popup不随着window一起移动的问题
原文:解决popup不随着window一起移动的问题 当我们设置Popup的StayOpen="True"时,会发现移动窗体或者改变窗体的Size的时候,Popup并不会跟随着一起移动位置。为了解决这个问题,可以给Popup定义一个附加属性,代码如下所示: /// /// Popup帮助类...
1114 0
|
Web App开发 iOS开发
navigator 应用
navigator对象包含有关浏览器的信息,通常用于检测浏览器和操作系统版本 navigator的对象属性包括: appCodeName:浏览器代码名的字符串表示; appName:返回浏览器的名称; appVersion:返回浏览器的操作系统平台; ...
1111 0
|
Java Android开发 Python
|
JavaScript 前端开发 数据格式

热门文章

最新文章