jQuery offset () возвращает отрицательное значение в столбце CSS3?

#jquery #css #offset

#jquery #css #смещение

Вопрос:

Я новичок в jQuery. Я хочу получить верхнее смещение определенного элемента. Я использую следующий метод:

 var top = $("img").offset().top;

Однако он возвращает отрицательное значение. Я не могу понять, почему он вернет отрицательное значение? Наименьшее значение должно быть равно нулю, или я что-то не так понял?

PS Я использую разрыв столбца CSS3 в html-файле.

Большое спасибо!!!

РЕДАКТИРОВАТЬ: тело html-файла:

 <div id="chapter-0">
    <div>
        <h1 xml:lang="en-us" id="toc-anchor">Main Title</h1>
        <h2 xml:lang="en-us" id="toc-anchor-1">Subtitle 1</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-2">Subtitle2</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-3">Subtitle3</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
    </div>
    <div>
        <img src="images/Table-01_fmt.jpeg" alt="Table-01.indd">
    </div>
</div>

Код, который я использовал для определения высоты изображения:

 $("img").each(function(i) {
    var top = $(this).offset().top;
    alert(top);
}

Ответ №1:

Вам было бы легко помочь, если вы опубликуете html-часть, где img есть, а также CSS, примененный к ней.

Редактировать:

Я проверил опубликованный вами код, и у меня были синтаксические ошибки в части jQuery, после их исправления я попробовал как в Firefox, так и в Google Chrome, все работает нормально.

Итак, не могли бы вы попробовать следующий html-файл и посмотреть? Единственное отличие — это двойные кавычки и добавление закрывающей скобки, которые отсутствовали в коде jQuery.

Это работает в Chrome.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function () {
            $("img").each(function(i) {
                var top = $(this).offset().top;
                alert(top);
            });
        });
    </script>

</head>
<body>
<div id="chapter-0">
    <div>
        <h1 xml:lang="en-us" id="toc-anchor">Main Title</h1>
        <h2 xml:lang="en-us" id="toc-anchor-1">Subtitle 1</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-2">Subtitle2</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
        <h2 xml:lang="en-us" id="toc-anchor-3">Subtitle3</h2>
        <p xml:lang="zh-hk"> text</p>
        <p xml:lang="zh-hk"> text</p>
    </div>
    <div>
        <img src="images/Table-01_fmt.jpeg" alt="Table-01.indd" />
    </div>
</div>
</body>
</html>

1. Спасибо за напоминание. Я обновил свой вопрос некоторыми кодами.

2. Я добавил код, который я тестировал. Помимо незначительных синтаксических ошибок, это работает для меня. Проверьте мой отредактированный ответ.