js获取div到body左侧距离

js获取div到body左侧距离,第1张

1、拖动后记录x,y值

给div加上mousePosition事件

function mousePosition(evt){  

evt = evt || windowevent;

return {

x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,

y : evtclientY + documentbodyscrollTop - documentbodyclientTop

}

}

2、打开页面div定位

$(“div”)attr("top",y)attr("left",x);

扩展资料

在用js获取元素位置之前,元素在页面的位置的计算公式,如下:

元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值;

用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 {这个方法返回的是一个对象,即Object,该对象具有4个属性:top,left,right,bottom }。

<html >

<head>

<meta >

<title>Demo</title>

</head>

<body style="width:2000px; height:1000px;">

<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;

background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>

</body>

</html>

<script>

documentgetElementById('demo')onclick=function (){

if (documentdocumentElementgetBoundingClientRect) {

alert("left:"+thisgetBoundingClientRect()left)

alert("top:"+thisgetBoundingClientRect()top)

alert("right:"+thisgetBoundingClientRect()right)

alert("bottom:"+thisgetBoundingClientRect()bottom)

var X= thisgetBoundingClientRect()left+documentdocumentElementscrollLeft;

var Y = thisgetBoundingClientRect()top+documentdocumentElementscrollTop;

alert("Demo的位置是X:"+X+";Y:"+Y)

}

}

</script>

你是想获取a标签?documentgetElementById("href4");就可以,如果获取不到,有可能是你js有问题,把js其他贴出来看一看,或者试一下下面的代码:<a href="#" id="testa">test</a>

<script type="text/javascript">

windowonload=function(){

alert(documentgetElementById("testa"));

}

</script>

objclientWidth //获取元素的宽度

objclientHeight //元素的高度

objoffsetLeft //元素相对于父元素的left

objoffsetTop //元素相对于父元素的top

objoffsetWidth //元素的宽度

objoffsetHeight //元素的高度

区别:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border

offset比client多了border的宽度

//获取元素的纵坐标(相对于窗口)

function getTop(e){

var offset=eoffsetTop;

if(eoffsetParent!=null) offset+=getTop(eoffsetParent);

return offset;

}

//获取元素的横坐标(相对于窗口)

function getLeft(e){

var offset=eoffsetLeft;

if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);

return offset;

}

//获取元素的纵坐标(相对于窗口)

function getTop(e){

var offset=eoffsetTop;

if(eoffsetParent!=null) offset+=getTop(eoffsetParent);

return offset;

}

//获取元素的横坐标(相对于窗口)

function getLeft(e){

var offset=eoffsetLeft;

if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);

return offset;

}

现在我有个窗口坐标X,Y 如何利用JS点击该坐标

>

以上就是关于js获取div到body左侧距离全部的内容,包括:js获取div到body左侧距离、js获取元素、JS如何判断元素相对于父窗口的绝对位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-10
下一篇 2023-05-10

发表评论

登录后才能评论

评论列表(0条)

保存