jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

2020-05-16 18:47:20易采站长站整理

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

<span style=”color:#000066; font-weight:bold”>var</span> X <span style=”color:#339933″>=</span> $<span style=”color:#009900″>(</span><span style=”color:#3366CC”>’#DivID'</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>offset</span><span style=”color:#009900″>(</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>top</span><span style=”color:#339933″>;</span>
<span style=”color:#000066; font-weight:bold”>var</span> Y <span style=”color:#339933″>=</span> $<span style=”color:#009900″>(</span><span style=”color:#3366CC”>’#DivID'</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>offset</span><span style=”color:#009900″>(</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>left</span><span style=”color:#339933″>;</span>

获取相对(父元素)位置:

<span style=”color:#000066; font-weight:bold”>var</span> X <span style=”color:#339933″>=</span> $<span style=”color:#009900″>(</span><span style=”color:#3366CC”>’#DivID'</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>position</span><span style=”color:#009900″>(</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>top</span><span style=”color:#339933″>;</span>
<span style=”color:#000066; font-weight:bold”>var</span> Y <span style=”color:#339933″>=</span> $<span style=”color:#009900″>(</span><span style=”color:#3366CC”>’#DivID'</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>position</span><span style=”color:#009900″>(</span><span style=”color:#009900″>)</span>.<span style=”color:#660066″>left</span><span style=”color:#339933″>;</span>