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

2024-08-25 08:22:29

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	窗口的文档显示区的宽度
width	window.outerWidth	窗口的外部宽度，包含工具条与滚动条
height		与width相似
left	window.screenLeft	返回相对于屏幕窗口的x坐标
top		与left相似

event事件

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

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

最新文章

热门文章