vue里，我用jq去获取元素的offsettop出现问题_框架

windowonload=function(){

waterfall();

windowonscroll=function(){

var parent=documentgetElementById("main");

var boxs=getByClass(parent,"box");

var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;

var documentH=scrollH+documentdocumentElementclientHeight;

var lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);

/763/

if(lastH-350<documentH){ //这里的lastH不减掉350，就无法进入if语句？？？

/465/

dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};

for(var i=0;i<dataIntdatalength;i++){

var divB=documentcreateElement("div");

divBclassName="box";

parentappendChild(divB);

var divP=documentcreateElement("div");

divPclassName="pic";

divBappendChild(divP);

myimg=documentcreateElement("img");

myimgsrc="/images/"+dataIntdata[i]src;

divPappendChild(myimg);

}

waterfall();

}

function waterfall(){

var oParent=documentgetElementById("main");

var boxs=getByClass(oParent,"box");

var boxW=boxs[0]offsetWidth;

var num=Mathfloor(documentdocumentElementclientWidth/boxW);

oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";

boxHarr=new Array();

for(var i=0;i<boxslength;i++){

if(i<num){

boxHarrpush(boxs[i]offsetHeight);

}else{

var minH=Mathminapply(null,boxHarr);

var minHindex=getminHindex(boxHarr,minH);

boxs[i]styleposition="absolute";

boxs[i]styletop=minH+"px";

boxs[i]styleleft=minHindexboxW+"px";

//boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";

boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;

}

function getByClass(parent,clsName){

a=parentgetElementsByTagName('');

var arr=[];

for(var i=0;i<alength;i++){

if(a[i]className==clsName){

arrpush(a[i]);

}

return arr;

}

function getminHindex(arr,minH){

for(var i in arr){

if(arr[i]==minH)

return i;

}

元素的顶部与父元素的顶部（实际的顶部，不是滚动后的顶部）的距离是 offsetTop，而父元素滚动后的顶部与实际顶部的距离是 scrollTop，所以只要元素offsetTop-父元素scrollTop，就是元素与父元素滚动后实际可见的那个顶部的距离

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。

2、在indexhtml中的<script>标签，输入jquery代码：

$('body')append($('div')offset()top - $(window)scrollTop());

3、浏览器运行indexhtml页面，此时通过jquery获取到了页面div倒窗口顶部的距离。

方法：先需要设置控件的position属性，position 属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。若有多个层切需要设定层的层次关系那么需要设置z-index属性。

举例如下：

jquery如何设置控件位置

//offset()获取当前元素基于浏览的位置

var offsettop=$("#unamespan")offset()top;

var offsetleft=$("#unamespan")offset()left;

//position()获取当前元素基于父容器的位置

var positiontop=$("#unamespan")position()top;

var positionleft=$("#unamespan")position()left;

//设置panel2的位置基于unamespan的坐标

$("#panel2")css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});

jq只有获取元素相对于浏览器的

$(this)offset()left()忘了后边要不要小括号了

$(this)offset()top()

相对于父元素的话，把父元素的position设置成相对或绝对定位

然后documentgetElementById("dddd")offsetTop

documentgetElementById("dddd")offsetLeft

就是你要的了

jquery代码如下：$("div")scrollTop()

scrollTop()方法介绍：

scrollTop()方法用于返回或设置匹配元素的滚动条的垂直位置。

小案例：

<!doctype html>

<head>

<title>获取滚动条离顶部的高度</title>

div{

width: 200px;

height: 200px;

overflow: scroll;

}

</style>

</head>

<body>

<div>

获取滚动条离顶部的高度<br />

</div>

$(document)ready(function(){

$("btn")click(function(){

alert($("div")scrollTop());

});

</script>

<button class="btn">获得当前滚动条的偏移量</button>

</body>

</html>

案例截图：

以上就是关于vue里，我用jq去获取元素的offsettop出现问题全部的内容，包括:vue里，我用jq去获取元素的offsettop出现问题、jquery 怎样获取元素相对父元素的偏移(距离)说明：父元素有滚动条的！、如何用jquery获得页面元素到窗口顶部的距离等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9870904.html

vue里，我用jq去获取元素的offsettop出现问题

发表评论

评论列表（0条）