取网页元素位置

最新推荐文章于 2024-04-20 17:51:59 发布

V_admin

最新推荐文章于 2024-04-20 17:51:59 发布

阅读量183

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/V_admin/article/details/120649750

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何获取网页元素的绝对位置、相对位置以及网页的大小。提供了几个关键函数，如getElementLeft、getElementTop用于计算元素的左上坐标，getViewport用于获取视口尺寸，以及getElementViewLeft和getElementViewTop用于获取元素在视口中的位置。这些函数对于前端开发者进行页面布局和交互设计非常有用。

摘要由CSDN通过智能技术生成

获取网页元素的绝对位置

function getElementLeft(element) {
	var actualLeft = element.offsetLeft;
	var current = element.offsetParent;
	while (current !== null) {
		actualLeft += (current.offsetLeft + current.clientLeft);
		current = current.offsetParent;
	}
	return actualLeft;
}

function getElementTop(element) {
	var actualTop = element.offsetTop;
	var current = element.offsetParent;
	while (current !== null) {
		actualTop += (current.offsetTop + current.clientTop);
		current = current.offsetParent;
	}
	return actualTop;
}

获取网页的大小

　　function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,//IE6
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

---------------------------------------------------------------------
//取scrollHeight和clientHeight的最大值
　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

获取网页元素的相对位置

//该元素left
　　function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft +=  (current.offsetLeft+current.clientLeft);
　　　　　　current = current.offsetParent;
　　　　}
　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
　　}
//该元素top
　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += (current.offsetTop+current.clientTop);
　　　　　　current = current.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}
　　　　return actualTop-elementScrollTop;
　　}