工具&利器

javascript之屏幕距离

Posted jacky

获取当前元素距离浏览器窗口的位置  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>

 

发表评论