<ul style="position: relative"> <li></li>
<li></li>
<li id="flag"></li>
<li></li>
</ul>
<script>
$(function(){
var flag=$("#flag");
alert(flagposition()top);//距离UI的上边距 50
alert(flagposition()top+flagheight());//得到75,需加上自身高度
});
</script>
可以通过position方法获取。把你的父元素设置position
jquery获取当前元素的坐标
1,获取对象
var obj = $("#id号"); 或 var obj = $(this);
实例中我获取的对象是d出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调整,实例中将创建的新窗口显示的按钮的右下角。
2,获取对象元素的位置(offset()方法)
var offset = objoffset();
获取对象元素的位置,分别是元素的top和left,调用方法是:offsetleft和offsettop,可知当前对象的左部和顶部位置。
3,获取对象元素的宽度(width()方法)
var right = offsetleft+objwidth();
实例中是获取对象的右下角位置,创建新窗口的左部位置。
4,获取对象元素的高度(height()方法)
var down = offsettop+objheight();
实例中是获取对象的右下角位置,创建新窗口的顶部位置。
1方法如下:
获取浏览器显示区域(可视区域)的高度 :
$(window)height();
获取浏览器显示区域(可视区域)的宽度 :
$(window)width();
获取页面的文档高度
$(document)height();
获取页面的文档宽度 :
$(document)width();
浏览器当前窗口文档body的高度:
$(documentbody)height();
浏览器当前窗口文档body的宽度:
$(documentbody)width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document)scrollTop();
获取滚动条到左边的垂直宽度 :
$(document)scrollLeft();
获取或设置元素的宽度:
$(obj)width();
获取或设置元素的高度:
$(obj)height();
某个元素的上边界到body最顶部的距离:objoffset()top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:objoffset()left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:objoffset()top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:objoffset()left(在元素的包含元素含滚动条的情况下)
2代码如下:
//返回当前页面高度
function pageHeight(){
if($browsermsie){
return documentcompatMode == "CSS1Compat" documentdocumentElementclientHeight :
documentbodyclientHeight;
}else{
return selfinnerHeight;
}
};
//返回当前页面宽度
function pageWidth(){
if($browsermsie){
return documentcompatMode == "CSS1Compat" documentdocumentElementclientWidth :
documentbodyclientWidth;
}else{
return selfinnerWidth;
}
};
应用场景:网站响应式开发
问题重现:刷新获取距离顶部偏移位置不准确,偶尔有准确。
问题解决思路:刚开始以为是绝对定位的问题,脱离文档流,所以位置获取不到,后来发现是渲染问题,没加载完成的时候不占位置,所以位置获取不到
问题解决:使用load,当页面加载完成后,再获取位置,使用document(ready)并不能保证页面全部渲染完毕
后来发现使用load的时候报错,原因是因为最高版本的JQ没有load方法,最后解决方案是使用on监听
以上就是关于jquery如何获取某个元素距离它父级的偏移量啊全部的内容,包括:jquery如何获取某个元素距离它父级的偏移量啊、用jquery如何实时获取对象的坐标、请问如何通过jquery获取页面内容的高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)