Question

我很难掌握如何使用jQuery获取元素的维度。这是我的示例代码：

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

现在我有一张ID为＃image_1的图片。当我尝试运行它时会发生什么，它会输出两个零。不是两次，或者是两次未定义。

感谢javascript newb的帮助。

Answer 1

即使你已经选择了答案，我也会输入这个答案，这样你才能理解为什么你以前的代码不起作用。

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来完成这项任务，因为它具有固有的跨浏览器功能。

Answer 2

如果图像不可见，您可能会获得0的宽度和高度。（这就是发生在我身上的事。）

已更新：您可以通过检查jQuery对象的length属性来确认是否已将图像添加到DOM中：

var inDOM = ($('#image_1').length > 0);

Answer 3

也许这是你问题中的拼写错误，但你的图片的ID真的是“＃image_1”吗？要使代码正常工作，它应该只是“image_1”。 “＃”仅在jquery选择器中用于指定其后面的文本是ID。

Answer 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的优势。

使用jQuery抓取图像尺寸时遇到问题

4 个答案: