Question

我遇到了jQuerys offset()

的问题

我在文档中有一些<img>。在准备好文档时，我将该图像包装成div并添加一些文本。然后我需要图像偏移。

如何在前置完成后获得图像的偏移量？

以下是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <title>Image Offset Problem!?</title>

    <script type="text/javascript">
        $(document).ready( function(){
            $img = $('#demoimg');

            // I hope this has nothing to do with it... it's just too big
            $img.width(800);

            var $prependDiv = $('<div>Some text</div>');
            var $wrap = $img.wrap('<div id="wrapper">').parent();
            //$wrap.prepend($prependDiv);

            // Here I need to use the FINAL offset, the one with the value that shows when we click the button.
            // Instead, I get something else!
            var imgOffset = $img.offset();
            console.log('offset().top = ' + imgOffset.top);
        });

    </script>
</head>

<body>
    <img id="demoimg" src="demoimg.jpg" />
    <input type="button" value="View image offset().top" onclick="calculateOffset()" />
</body>

<script type="text/javascript">
    function calculateOffset() {
        console.log('offset().top = ' + $('#demoimg').offset().top);
    };
</script>

我需要访问offset()功能中的$(document).ready()。右上角。

有办法做到这一点吗？感谢。

Answer 1

我认为您需要在使用$img包装后重新定义.wrap()，因为dom引用已更改。

尝试重新选择这样的元素：

var imgOffset = $('#demoimg').offset();

使用$img后重新定义.wrap()：

...
$img = $('#demoimg');
var imgOffset = $img.offset();
...

在添加另一个元素之后元素的offset（）

1 个答案: