获取当前元素距离浏览器窗口的位置 PS:是只读属性,不可设置
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>屏幕象素测试</title>
<style type="text/css">
#div1{
width:150px;
height:100px;
border:2px solid #4455ff;
position:absolute;
top:300px;
left:230px;
overflow:auto;
}
#div2{
}
#div2_1{
}
#div3{
}
</style>
</head>
<body>
<div id="div1">
点下我试试<br>
中文会自动换行所以要用数字或字母
111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
中文会自动换行所以要用数字或字母
</div>
<div id="div2">
<div id="div2_1">
</div>
</div>
<div id="div3">
</div>
<script type="text/javascript" charset="utf-8">
var div1 = document.getElementById("div1");
console.log(div1);
div1.scrollTop=10;
div1.scrollLeft=10;
with(document){
write('距离浏览器窗口顶部 '+div1.offsetTop+'<br>');
write('距离浏览器窗口左部 '+div1.offsetLeft+'<br>');
write('当前元素宽度包含边框 '+div1.offsetWidth+'<br>');
write('当前元素高度包含边框 '+div1.offsetHeight+'<br>');
write('当前元素宽度不包含边框 '+div1.clientHeight+'<br>');
write('当前元素高度不包含边框'+div1.clientHeight+'<br>');
write('当前元素滚动条顶部位置'+div1.scrollTop+'<br>');
//为什么scrollTop返回的是元素的高度，而scrollLeft返回的是设置的值 ??
write('当前元素滚动条空间左部位置 包含边框'+div1.scrollWidth+'<br>');
write('当前元素举动条空间顶部位置 包含边框'+div1.scrollHeight+'<br>');
}
//由事件产生的像素位置-----坐标
//Firefox 点后重新刷新不会加载 ？？ 像素也有差别
div1.onclick=function(event){
with(document){
console.log('当前元素点后的鼠标X坐标距离左边窗口位置 '+event.clientX+'<br>');
console.log('当前元素点后的鼠标Y坐标距离顶部窗口位置'+event.clientY+'<br>');
//网说解释说是获取当前事件后与容器的坐标 ??
console.log(''+event.offsetX+'<br>');
console.log(event.offsetY);
}
}
//测试下 滚动事件
div1.onscroll=function(event){
//console.log(event);
console.log(div1.scrollTop);
}
</script>
</body>
</html>