Jquery 如何获得DIV离左边是多少像素

使用Jquery 获取DIV相对浏览器的边距，也就是绝对X,Y坐标，可以用offset()：

$('div')offset()left;

示例如下：

创建Html元素

<div class="top">

本层相对浏览器的左边距为50px

<div class="inner">本层相对上一层的左边距为20px,所以相对浏览器边距为70px</div>

</div>

设置css样式

{margin:0;}

divtop{

width:500px;height:150px;

margin:50px;

background:green;

color:white;

}

divinner{

width:450px;height:100px;line-height:100px;

margin:20px;

background:red;

color:white;

}

编写jquery代码

$(function(){

$("divinner")click(function() {

alert("相对窗口左边距："+$(this)offset()left);

});

})

观察效果

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;    

    }

}

源码中position是这样写的：

position: {

my: 'center',

at: 'center',

of: window,

collision: 'fit',

// ensure that the titlebar is never outside the document

using: function(pos) {

var topOffset = $(this)css(pos)offset()top;

if (topOffset < 0) {

$(this)css('top', postop - topOffset);

}

}

},

你要是想自己指定可以试试 using 那个function，我身边没有环境，不能帮你试了。

只有在DOM元素被渲染了之后，才能获取元素实际的宽高。

换句话说，如果元素还未插入DOM树里，就不可能走到渲染这一步，更不可能拿到元素的宽和高。

综上所述，你只能通过在DOM中插入元素，之后再获取已经渲染好的元素的宽高。

以上就是关于Jquery 如何获得DIV离左边是多少像素全部的内容，包括:Jquery 如何获得DIV离左边是多少像素、vue里，我用jq去获取元素的offsettop出现问题、jquery ui dialog 对话框的初始位置 position: 怎么设定等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！