dot-netasp.netjavascriptjquerycss

Проблемы с получением размеров изображения с помощью jQuery

просмотры: 7.2K

Мне сложно понять, как получить размеры элемента с помощью jQuery. Вот мой пример кода: 

$(document).ready(function() {
        var width = $("#image_1").width();
        var height = $("#image_1").height();
        document.write(width);
        document.write(height);
    });

Теперь, конечно, у меня есть изображение с идентификатором # image_1. Что происходит, когда я пытаюсь запустить его, так это то, что он выводит два нуля. Не null дважды или undefined дважды.

Спасибо за помощь от javascript newb.

Источник

Ответов (4)

Решение

Это работает для меня:

<head>
    <script type="text/javascript">
        function foo() {
            var image = document.getElementById("the_image");
            alert(image.offsetWidth);
            alert(image.offsetHeight);
        }
    </script>
</head>
<body onload="foo();">
    <img src="img.png" id="the_image">
</body>

Это работает до тех пор, пока изображение не настроено на display: none; использование, offsetWidth а offsetHeight также имеет то преимущество, что вообще не требует jQuery.

Источник

Вы можете получить 0 ширину и высоту, если изображение не видно. (Это то, что только что случилось со мной.)

Обновлено : вы можете подтвердить, что изображение добавлено в DOM, проверив свойство length объекта jQuery:

var inDOM = ($('#image_1').length > 0);
Источник

Возможно, это была опечатка в вашем вопросе, но действительно ли идентификатор вашего изображения "# image_1"? Чтобы ваш код работал, это должно быть просто «image_1». Знак «#» используется только в селекторе jquery, чтобы указать, что следующий за ним текст является идентификатором.

Источник

Хотя вы уже выбрали ответ, я набираю его, чтобы вы поняли, почему предыдущий код не работал.

Функция jQuery document.ready запускается перед загрузкой изображений. Вместо этого используйте window.load ...

$(window).load(function() {
  var width = $("#image_1").width();
  var height = $("#image_1").height();
  document.write(width);
  document.write(height);
});

Как бы то ни было, я думаю, что для этой задачи лучше использовать jQuery из-за присущей кроссбраузерности функциональности.

Источник