jQuery.position()方法獲取不到值的安全替換方法
調(diào)用jQuery.position()方法會返回相對于父元素的位置，jQuery官方文檔中描述說，它跟.offset()方法不一樣，.offset()返回的是相對于document的位置，而.position()返回的是相對于父元素的位置。
但事實上，在使用的過程中，我們發(fā)現(xiàn).position()返回的值經(jīng)常是0。但事實不是0。尤其是谷歌瀏覽器和IE瀏覽器里。火狐瀏覽器沒有此問題。
究其原因，以基于Webkit的瀏覽器(谷歌瀏覽器和Safari瀏覽器)為例，只有當(dāng)元素(圖片、flash等)完全加載后，瀏覽器才能訪問到這些元素的高度和寬度，而火狐瀏覽器是在DOM加載完成后就能訪問這些屬性，它不需要知道這個元素的完整尺寸。而谷歌瀏覽器就不行。因此在谷歌/IE這樣的瀏覽器里，如果你想使用.position()獲取元素的偏移量，往往得到值就是初始值:0。
有一種補(bǔ)救的方法是將你的.position()調(diào)用放到 $(window).load()事件觸發(fā)之后，而不是$(document).ready事件之后。但這種方法也未必可靠。
另外一種變通的方法是用.offset()來換算：
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
這雖然產(chǎn)生了多余的代碼，但比較可靠的多，用的讓人放心。
相關(guān)文章
jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D柱狀圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)硪黄猨query tmpl模板(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jquery tablesorter.js 支持中文表格排序改進(jìn)
之前研究過一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強(qiáng)做了一個用著。后面發(fā)現(xiàn)當(dāng)動態(tài)給單元格加超鏈接，或者列中存在一些空白，就排序不了了。2009-12-12
我們在做項目的時候，經(jīng)常需要實現(xiàn)全選和反選功能，到網(wǎng)上搜了一圈，發(fā)現(xiàn)網(wǎng)上寫的全選的代碼，不是完整的，是有bug的。下面結(jié)合自己的項目給大家分享下。2016-01-01
JQuery點擊行tr實現(xiàn)checkBox選中的簡單實例
下面小編就為大家?guī)硪黄狫Query點擊行tr實現(xiàn)checkBox選中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
qTip2是一個灰常強(qiáng)大且精致的jQuery提示信息插件，是qTip的第2版，也是一個全新的版本，提供了豐富的功能及漂亮的外觀，非常易于使用2012-02-02
jquery 的操作HTML控件，需要的朋友可以參考下。2010-01-01
在前兩周國外知名博客WDL先后分享了“2010最佳系列”中的“最佳免費WordPress主題”和“最佳免費字體”，在這個星期又發(fā)布了2010年最佳jQuery插件。2010-12-12
dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)
這篇文章主要介紹了dul無法加載bootstrap實現(xiàn)unload table/user恢復(fù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
正好項目中有個小需求, 要求把表格指定列中內(nèi)容相同的單元格進(jìn)行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個數(shù), 然后給第一個與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解2011-06-06