jquery 設(shè)置元素相對于另一個元素的top值(實例代碼)
<div id="span1">sfdsfsddfsdf</div>
<span id="span2" style="position:relative">
<input id="input" type="text"></input>
<input id="button" type="button"></input>
</span>
設(shè)置button在input的下方
$("#button").css("{top":$("#input").offset().top-$("#span2").offset().top+$("#input").height,position:"absolute"});
這樣input在哪個位置button都在input的下邊，同樣可以運(yùn)用到日歷小插件在input文本框的下方
1、在jquery中offset().top是相對于body來說的，另外在設(shè)置top值的時候要找到與該元素最近的有相對值的元素
在js中可以這樣寫：
//取得HTML控件絕對位置
Calendar.prototype.getAbsPoint = function (e){
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
var xy = this.getAbsPoint(popControl);
this.panel.style.left = xy.x + "px";
this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px";
如圖所示：
相關(guān)文章
這篇文章主要介紹了jQuery中的過濾元素操作。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery實現(xiàn)滾動條滾動到子元素位置（方便定位）
本文主要介紹了jQuery實現(xiàn)滾動條滾動到子元素位置的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法，在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因，這兩個問題都非常多見，感興趣的朋友一起看下吧2016-08-08
基于jquery的DIV隨滾動條滾動而滾動的代碼，有了JQuery簡單多了，就幾行代碼搞定2012-07-07
jQuery EasyUI 折疊面板accordion的使用實例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉(zhuǎn)問題
JQuery對class屬性的操作實現(xiàn)按鈕開關(guān)效果
jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
基于Datatables跳轉(zhuǎn)到指定頁的簡單實例