javaScript 元素的位置，尺寸，宽度总结上

Fecker曹

2015-04-28

<style>
	body{
		margin:0px;
		padding:0px;
		}
	#div1{
		width:300px;
		height:200px;
		background:#CC3;
		margin:30px auto 0px 10px;
		position:relative;
		}
	#div2{
		width:300px;
		height:200px;
		background:#096;
		position:absolute;
		left:310px;
	}
	#div11{
		margin-left:10px;
		}	
</style>

</head>
<body>
	<div id='div1'>
    	xxxxxx
        <div id='div11'>fasdfa</div>
    </div>
	<div id='div2'>
    
    </div>
    <div id='div3' style="width:200px">
    	<div id='div31'></div>
    </div>

</body>

//可视区及屏幕坐标
//clientX 可视区x坐标，距离左边框的位置,clientY,
//鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

//pageX,pageY 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
//screenX 屏幕区x坐标，距离左屏幕的位置,creenY


////在IE中，event对象是全局的，它被存储在window.event中
//在chrome 版本 40.0.2214.115 m中  evt与window.event都支持,改变其顺序不影响其结果,都是clienX当出现滚动，他显示的值是会变化的,而pageX不会
window.onload=function(){
		document.onclick=function(evt){
				var e=window.event||evt;
				//alert(e.clientX+' '+e.clientY);
				document.getElementById('div2').innerHTML='evt: '+evt+'  '+ 'window.event: '+window.event+'  '+'clientX: '+e.clientX+' '+'clientY: '+e.clientY+' '+'pageX: '+e.pageX+' '+'pageY: '+e.pageY;
				setTimeout(function(){
						document.write('document.body.clientLeft: '+document.body.clientLeft);
						document.write('document.body.scrollLeft: '+document.body.scrollLeft);
					},4000);
				
			};
			
			//获取尺寸
			//来看下offsetParent这个属性
			//看下实例的效果，意思就差不多明白了
			//找寻有定位设置的父节点,没有就是body了,听说有一些是html，到是没有验证
			console.info(document.getElementById('div11').offsetParent);//div1
			console.info(document.getElementById('div31').offsetParent);//body
			//对比下我写的css格式是不是有点眼熟
			console.info(document.getElementById('div1').offsetHeight);//200
			console.info(document.getElementById('div1').offsetLeft);//10
			console.info(document.getElementById('div1').clientLeft);//0
			
			console.info(document.getElementById('div1').offsetTop);//30
			console.info(document.getElementById('div1').offsetWidth);//300
			//下面这两种写法第一个是获取不到，第二个获取到了
			//总结：这种方式只有行内才能获得
			//再注意获得的值，一个带px，一个不带
			console.info(document.getElementById('div1').style.width);//这个为空
			console.info(document.getElementById('div3').style.width);//200px
			//再验证一个
			console.info(document.getElementById('div3').offsetWidth);//200
			//还有一些body,screen等等
			//一些总结
			console.info('网页可见区域宽: '+document.body.clientWidth);
			console.info('网页可见区域高: '+document.body.clientHeight);
			
			console.info('网页正文全文宽: '+document.body.scrollWidth);
			console.info('网页正文全高: '+document.body.scrollHeight);
			console.info('网页正文部上: '+window.screenTop);
			console.info('网页正文部左: '+window.screenLeft);
			
			console.info('屏幕分辨率的高: '+window.screen.height);
			console.info('屏幕分辨率的宽: '+window.screen.width);
			
			console.info('屏幕可用工作区的高: '+window.screen.availHeight);
			console.info('屏幕可用工作区的宽: '+window.screen.availWidth);
			
			
			//获取绝对位置
			//第一种方法
			
			
			//第二种方法
			
	};

//至此结束

javascript