jQuery offset() 返回 null答案

【问题标题】：jQuery offset() returns nulljQuery offset() 返回 null
【发布时间】：2013-01-06 04:23:16
【问题描述】：

为什么我的代码不返回顶部和左侧的值？而是返回 null。是否需要为 offset() 设置一些值；上班？

var divOrg = $( "#portfolioButton" );
var pos = divOrg.offset();
console.log( "left : " + pos.left + ", top : " + pos.top );

【问题讨论】：

#portfolioButton 存在吗？
这是 - #portfolioButton - 写对了吗？这是它在html中的显示方式吗？除了类似的东西，没有理由不运行代码：jsfiddle.net/SPG33
按钮中有文字吗？
这是我的投资组合 id 的 div：<div id="portfolioButton" onMouseOver="OverStateMenu(this)" class="menuClass menuClassOverState shadow1px"> @ExplosionPills 是的，它存在 @JOPLOmacedo 我确实有类似但不同的 id，id 是唯一的。 @BlakePlumb 是的，这个 div 中有一些文字，会影响它。谢谢大家！
试试console.log(divOrg);

标签： jquery offset

【解决方案1】：

只要div 未被隐藏，您的代码就应该可以正常工作。见fiddle

<div id="portfolioButton">text</div>

您无需为offset() 设置任何值即可工作。它从元素相对于文档的位置获取其值。

.offset() 方法允许我们检索当前位置元素相对于文档。

【讨论】：

我对 jQuery 的理解足够理解 offset() 的原理，看起来很简单。这是我在控制台日志中得到的错误：TypeError: pos is null。再次感谢。
我也有多个类应用到这个 div，这会以某种方式影响它吗？
这个 div 应用了 3 个类 .menuClass{ width:auto; vertical-align:middle; display:table-cell; position:relative; height:30px; padding-left:5px; padding-right:5px; } .menuClassOverState{ -moz-border-radius: 3px; border-radius: 3px; background-color:rgba(153,153,153,1); position:absolute; }.shadow1px{ -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2); } 抱歉，这个文本框看起来很乱。
好吧，我尝试了你的 css，它似乎仍然对我有用。我确实注意到您同时将 position: relative 和 position: absolute 应用于 div。
我已经找回了这个职位：absolute，谢谢你的帮助，我会让你知道我的进展情况。

【解决方案2】：

在你的页面头部试试这个：

<script type="text/javascript">
$(document).ready(function() {

     var divOrg = $( "#portfolioButton" );

        var offset = divOrg.offset();
        divOrg.html ("left : " + offset.left + ", top : " + offset.top );

 console.log(divOrg)
});
    </script>

在正文中：<div id="portfolioButton">Test1.</div>

参考：http://api.jquery.com/offset/

【讨论】：