jquery 設(shè)置元素相對(duì)于另一個(gè)元素的top值(實(shí)例代碼)
<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在哪個(gè)位置button都在input的下邊，同樣可以運(yùn)用到日歷小插件在input文本框的下方
1、在jquery中offset().top是相對(duì)于body來說的，另外在設(shè)置top值的時(shí)候要找到與該元素最近的有相對(duì)值的元素
在js中可以這樣寫：
//取得HTML控件絕對(duì)位置
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中的過濾元素操作。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置（方便定位）
本文主要介紹了jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧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的原因，這兩個(gè)問題都非常多見，感興趣的朋友一起看下吧2016-08-08
基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼
基于jquery的DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的代碼，有了JQuery簡(jiǎn)單多了，就幾行代碼搞定2012-07-07
jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉(zhuǎn)問題
JQuery對(duì)class屬性的操作實(shí)現(xiàn)按鈕開關(guān)效果
jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例