首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用Javascript (jQuery)判断图像是否有特定的宽度/高度?

如何用Javascript (jQuery)判断图像是否有特定的宽度/高度?
EN

Stack Overflow用户
提问于 2012-10-15 21:00:03
回答 3查看 1.6K关注 0票数 3

可能重复: How to get image size (height & width) using javascript?

通常,当指定宽度时,我们可以使用$('img').width()$('img').css('width')获得图像宽度,如下所示

代码语言:javascript
运行
复制
<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />

但如果我们不指定宽度:

代码语言:javascript
运行
复制
<img src="image.gif" />

IE将返回28 0px,FF将返回0 0px。

问题是,我们可能故意将图像宽度设置为28 0px或0 0px,这将在没有实际设置宽度的情况下产生相同的数字。

我的问题是:我们如何判断一幅图像是否有特定的宽度/高度?

编辑

对不起,各位,忘记了一件重要的事情: IE上的28 0px和FF上的0 0px只有在找不到图像(404)时才会发生。

EN

回答 3

Stack Overflow用户

发布于 2012-10-15 21:02:22

检查.attr('width') / .attr('height')

票数 2
EN

Stack Overflow用户

发布于 2012-10-15 21:15:47

这是一个黑客,但您可以通过这种方式获得原始HTML:

代码语言:javascript
运行
复制
var htmltag=$("img")[0].outerHTML;

然后对width="..."style="..."进行解析

代码语言:javascript
运行
复制
if (
    htmltag.match(/style=['"][^'"]*width:/) ||
    htmltag.match(/width=['"]/)
   ) alert("Has width");

有一些关于border-width的边缘情况,等等,但是你明白了。

票数 1
EN

Stack Overflow用户

发布于 2012-10-15 21:13:08

图像在浏览器中异步加载,因此它取决于您检查维度的位置。我认为您看到的是,当您查询宽度或高度时,图像尚未加载。

如果运行此操作,您可能会看到初始警报()报告为0,但如果单击该按钮,则会显示实际大小:

代码语言:javascript
运行
复制
<img id="Image" src="images/MessageBoardLogo.png" />
<input type="button" id="Button" value="Caption" />

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

    $("#Button").click(imageSize);
});
function imageSize()
{
    alert($("#Image").width());
}        
</script>

对我来说具有讽刺意味的是,FireFox立即在第一个例子中报告宽度,IE和Chrome 0px,但这只是显示它取决于浏览器的时间,图像的加载时间等等。

确保图像已加载并已准备好可靠地读取大小的最佳方法是使用加载处理程序:

代码语言:javascript
运行
复制
$("#Image").load( function() { 
                      // do whatever you need with width and height
                      global.imgWidth = $(this).width(); 
                      global.imgHeight = $(this).height() 
                   });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12903902

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档