对象的宽度、top位置，x坐标属性

DOM对象

	DOM对象属性	对应css	说明	读/写
width	obj.clientWidth=20	1. 内联样式 <p style="width:20px"></p> 2. 内部/外部CSS <style> p{ width: 20px; border: 0; padding: 0; } </style> <p></p>	在页面上返回内容的可视宽度 (内容+padding) 不包括边框，边距或滚动条	只读
	obj.scrollWidth=20	1. 内联样式 2. 内部/外部CSS	子元素整个盒子宽度以及当前元素左侧padding值 (内容+padding)	只读
	obj.offsetWidth=20	1. 内联样式 2. 内部/外部CSS	返回元素的宽度， 包括边框和填充 (内容+padding+border)	只读
	obj.style.width="20px"	<p style="width:20px"></p>	在内联中定义才能读到值，否则为空	可写
	obj.width		这个属性并没有
height			与width一样
top	obj.offsetTop=20		元素border外侧相对父元素border内侧垂直方向的偏移量	只读
	obj.scrollTop=20		overflow:scroll时会出现滚动条 当前内容的顶部相对原始内容顶部的距离	可写
	obj.style.top="20px"		在内联中定义才能读到值，否则为空	可写
left			与top一样

Window窗口

	属性	说明
width	window.innerWidth	窗口的文档显示区的宽度
	window.outerWidth	窗口的外部宽度，包含工具条与滚动条
height		与width相似
left	window.screenLeft	返回相对于屏幕窗口的x坐标
top		与left相似

event事件

纵坐标与横坐标类似，这里只列出横坐标

属性	说明
event.screenX	鼠标指针相对于电脑屏幕的水平坐标
event.clientX	鼠标指针向对于浏览器页面（或可见区域）的水平坐标
event.pageX	鼠标指针相对于整个文档的水平坐标

转载于:https://www.cnblogs.com/coolqiyu/p/7153482.html