给定HTML DOM ID,如何在JavaScript / JQuery中获取元素相对于窗口的位置?这与相对于文档和偏移父项不同,因为该元素可能位于iframe或其他元素内。我需要获取元素矩形的屏幕位置(如位置和尺寸),因为它当前正在显示。如果元素当前处于屏幕外(已滚动关闭),则可以接受负值。
这适用于iPad(WebKit / WebView)应用程序。每当用户点击UIWebView
中的特殊链接时,我应该打开一个弹出视图,显示有关该链接的更多信息。弹出窗口视图需要显示一个箭头,该箭头指向调用它的屏幕部分。
答案 0 :(得分:256)
最初,抓住元素的.offset位置并计算其相对于窗口的相对位置
参考:
1. offset
2. scroll
3. scrollTop
您可以尝试使用此 fiddle
以下几行代码解释了如何解决这个问题
当执行.scroll事件时,我们计算元素相对于窗口对象的相对位置
$(window).scroll(function () {
console.log(eTop - $(window).scrollTop());
});
在浏览器中执行滚动时,我们调用上面的事件处理函数
function log(txt) {
$("#log").html("location : <b>" + txt + "</b> px")
}
$(function() {
var eTop = $('#element').offset().top; //get the offset top of the element
log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
$(window).scroll(function() { //when window is scrolled
log(eTop - $(window).scrollTop());
});
});
#element {
margin: 140px;
text-align: center;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid #0099f9;
border-radius: 3px;
background: #444;
color: #0099d9;
opacity: 0.6;
}
#log {
position: fixed;
top: 40px;
left: 40px;
color: #333;
}
#scroll {
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid #000;
border-radius: 2px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="element">Hello
<hr>World</div>
<div id="scroll">Scroll Down</div>
答案 1 :(得分:66)
尝试边界框。这很简单:
Dim st as system.io.stream = crRpt.ExportToStream (ExportFormatType.PortableDocDormat)
Dim reader as PdfReader = new PdfReader (st)
Dim output = new FileStream (file_name, FileMode.OpenOrCreate,FileAcces.Write)
Dim stamper as pdfStamper = new PdfStamper (reader,output)
Dim password as string ="user"
Stamper.setEncryption (pdfwriter.encryprion_aes_128,password,password,pdfwriter.Allow_degraded_printing)
Stamper.close()
Reader.close ()
答案 2 :(得分:6)
function getWindowRelativeOffset(parentWindow, elem) {
var offset = {
left : 0,
top : 0
};
// relative to the target field's document
offset.left = elem.getBoundingClientRect().left;
offset.top = elem.getBoundingClientRect().top;
// now we will calculate according to the current document, this current
// document might be same as the document of target field or it may be
// parent of the document of the target field
var childWindow = elem.document.frames.window;
while (childWindow != parentWindow) {
offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
childWindow = childWindow.parent;
}
return offset;
};
你可以这样称呼它
getWindowRelativeOffset(top, inputElement);
我只根据我的要求专注于IE,但可以为其他浏览器做类似的事情
答案 3 :(得分:4)
这听起来更像是您想要所选链接的工具提示。有许多jQuery工具提示,请试用jQuery qTip。它有很多选项,很容易改变风格。
否则,如果您想自己这样做,可以使用jQuery .position()
。有关.position()
的更多信息位于http://api.jquery.com/position/
$("#element").position();
将返回元素相对于偏移父级的当前位置。
还有jQuery .offset();,它将返回相对于文档的位置。
答案 4 :(得分:3)
<强> TL; DR 强>
headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();
headroom_by_DOM = $('#id')[0].getBoundingClientRect().top; // if no iframe
.getBoundingClientRect()似乎是universal。自jQuery 1.2以来,.offset()和.scrollTop()已得到支持。谢谢@ user372551和@prograhammer。要在iframe中使用DOM,请参阅@ImranAnsari's solution。
答案 5 :(得分:1)
尝试此操作以获取元素相对于窗口的位置。
$("button").click(function(){
var offset = $("#simplebox").offset();
alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
});
#simplebox{
width:150px;
height:100px;
background: #FBBC09;
margin: 150px 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
<p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
<div id="simplebox"></div>
查看更多@ Get the position of an element relative to the document with jQuery