天天看點

用js擷取位置,距離,尺寸

一:樣式值的擷取

1:擷取行内樣式   obj.style.樣式名  
2:擷取非行内樣式  parseInt(window.getComputedStyle(元素,null).樣式屬性)
3:IE 浏覽器寫法  元素.currentStyle[屬性值]
           

二:擷取元素尺寸

1:content+padding+border
	offsetWidth
	offsetHeight
2:content+padding
	clientWidth
	clientHeight
3:content
	parseInt(window.getComputedStyle(元素,null).樣式屬性)
           

三:滾動條滾動距離

1:非IE :document.documentElement.scrollTop
2:IE :document.body.scrollTop
3:案例:用JS代碼實作固定定位效果
           

四:滑鼠位置的擷取

1:相對于事件源
	offsetX
	offsetY
2:相對于整個文檔
	pageX
	pageY
3“:相對于浏覽器視窗
	clientX
	clientY
ps:忽略預設css寫法:pointer-events:none  可用于解決閃爍問題,使隻作用于目前元素
           

五:擷取視窗的尺寸

1:包含滾動條尺寸
	innerWidth
	innerHeight
2:不包含滾動條尺寸
	document.docunmentElement.clientWidth
	document.docunmentElement.clientHeight
           

六:擷取元素的偏移量

offsetLeft
offsetTop
offsetParent  預設是body,定位後根據定位元素
           

預設相對于視窗擷取偏移量,可設定定位來根據定位來擷取偏移量

用js擷取位置,距離,尺寸

繼續閱讀