jquery 設(shè)置元素相對(duì)于另一個(gè)元素的top值(實(shí)例代碼)

更新時(shí)間：2013年11月06日 08:43:50 投稿：jingxian

在jquery中offset().top是相對(duì)于body來(lái)說(shuō)的，另外在設(shè)置top值的時(shí)候要找到與該元素最近的有相對(duì)值的元素

<div id="span1">sfdsfsddfsdf</div>
<span id="span2" style="position:relative">

</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來(lái)說(shuō)的，另外在設(shè)置top值的時(shí)候要找到與該元素最近的有相對(duì)值的元素

在js中可以這樣寫(xiě)：

復(fù)制代碼代碼如下:

//取得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操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-01-01
詳解jQuery如何實(shí)現(xiàn)模糊搜索
這篇文章主要介紹了jQuery如何實(shí)現(xiàn)模糊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢(xún)框
這篇文章主要為大家介紹了jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢(xún)框，感興趣的小伙伴們可以參考一下
2016-01-01
jquery.flot.js簡(jiǎn)單繪制折線(xiàn)圖用法示例
這篇文章主要介紹了jquery.flot.js簡(jiǎn)單繪制折線(xiàn)圖用法,結(jié)合實(shí)例形式分析了jQuery插件jquery.flot.js實(shí)現(xiàn)圖形繪制的常用操作技巧,需要的朋友可以參考下
2017-03-03
jQuery中appendTo()方法用法實(shí)例
這篇文章主要介紹了jQuery中appendTo()方法用法,實(shí)例分析了appendTo()方法的功能、定義及把匹配的元素插入指定元素結(jié)尾的使用技巧,需要的朋友可以參考下
2015-01-01
bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法
這篇文章主要介紹了bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法,需要的朋友可以參考下
2017-10-10
jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能【附j(luò)sencrypt.js下載】
這篇文章主要介紹了jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能,結(jié)合具體實(shí)例形式分析了js使用jsencrypt.js插件前端字符數(shù)據(jù)處理傳輸及C#后臺(tái)數(shù)據(jù)轉(zhuǎn)換與RSA加密相關(guān)操作技巧,并附帶jsencrypt.js供讀者下載參考使用,需要的朋友可以參考下
2017-06-06
淺談jquery頁(yè)面初始化的4種方式
本文介紹了Jquery頁(yè)面初始化的4種方式的實(shí)例代碼，需要的朋友可以看下
2016-11-11
超贊的jQuery圖片滑塊動(dòng)畫(huà)特效代碼匯總
本文將為大家收集10個(gè)超贊的jQuery圖片滑塊動(dòng)畫(huà),都是小編精挑細(xì)選而來(lái)，希望這些現(xiàn)成的jQuery插件將為你節(jié)省很多開(kāi)發(fā)時(shí)間。
2016-01-01
JQuery入門(mén)——事件切換之hover()方法應(yīng)用介紹
謂切換事件，即有兩個(gè)以上的事件綁定于一個(gè)元素，在元素的行為動(dòng)作間進(jìn)行切換,有兩個(gè)方法用于事件的切換，一個(gè)方法是hover()，另一個(gè)是toggle(),感興趣的朋友不妨了解下,或許對(duì)你有所幫助
2013-02-02