使用jquery获取网页中图片高度的两种方法
更新时间:2013年09月26日 17:19:30 作者:
使用jquery获取网页中图片的高度其实很简单,目前有两种不错的方法可以实现,下面为大家详细介绍下,有所疑惑的你可以参考下
使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的
$("img").whith();(返回纯数字)
$("img").css("width");(返回字符串:数字+"px")
但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异
方法一
在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上加上width属性,或者在css中写出来图片的告诉,这样就可以了,所以每次我要去获取一个图片的高度的时候,都需要去先测量一下图片的高度,然后写到网页中,这样才可以,是不是很笨拙啊,下面我们来看第二个方法。
方法二
最近在看Learning jQuery英文版原著,正因为一边翻译,一边阅读,所以每一页都看的很仔细,于是终于仔细阅读体会了以下两种常用的jquery事件加载的方法
$(function(){});
window.onload=function(){}
第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还没有加载,比如图片等资源,但是DOM结构已经渲染成功了
第二个呢,是在网页DOM结构渲染完成,而且资源已经加载成功以后调用的。
有没有感受出区别来呢,一个是在资源没有加载的时候调用的,一个是在资源加载结束,页面已经渲染之后调用的,所以当我们在$(function(){})调用$('img').width()的时候,由于图片还没有加载,所以这时候<img>标签的高度就是0,所以返回值就是0。但是当你用window.onload=function(){}调用的时候,图片已经加载出来了,所以这时候就能得到图片的高度。
所以记得,$(function(){})是在DOM渲染结束,资源还没有加载的时候执行的,如果你想获取到一些资源的信息,这个时候是没有办法的哦
复制代码 代码如下:
$("img").whith();(返回纯数字)
$("img").css("width");(返回字符串:数字+"px")
但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异
方法一
在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上加上width属性,或者在css中写出来图片的告诉,这样就可以了,所以每次我要去获取一个图片的高度的时候,都需要去先测量一下图片的高度,然后写到网页中,这样才可以,是不是很笨拙啊,下面我们来看第二个方法。
方法二
最近在看Learning jQuery英文版原著,正因为一边翻译,一边阅读,所以每一页都看的很仔细,于是终于仔细阅读体会了以下两种常用的jquery事件加载的方法
复制代码 代码如下:
$(function(){});
window.onload=function(){}
第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还没有加载,比如图片等资源,但是DOM结构已经渲染成功了
第二个呢,是在网页DOM结构渲染完成,而且资源已经加载成功以后调用的。
有没有感受出区别来呢,一个是在资源没有加载的时候调用的,一个是在资源加载结束,页面已经渲染之后调用的,所以当我们在$(function(){})调用$('img').width()的时候,由于图片还没有加载,所以这时候<img>标签的高度就是0,所以返回值就是0。但是当你用window.onload=function(){}调用的时候,图片已经加载出来了,所以这时候就能得到图片的高度。
所以记得,$(function(){})是在DOM渲染结束,资源还没有加载的时候执行的,如果你想获取到一些资源的信息,这个时候是没有办法的哦
相关文章
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
这篇文章主要介绍了使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办的相关资料,需要的朋友可以参考下2016-01-01jQuery 属性选择器element[herf*=''value'']使用示例
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解,感兴趣的朋友可以参考下2013-10-10jquery追加元素的所有方法全面深入实例讲解(append、prepend、after、before、wrap等等)
几乎所有网站的开发都离不开jQuery,jQuery可以很方便的实现网页中的一些效果,也很轻松的对网页中的一些DIV元素进行添加,修改或删除的操作。由于不同位置追加元素的代码不一样,本文实例讲解如何对网页中某个指定的DIV进行元素的追加操作。2023-03-03jQuery Chart图表制作组件Highcharts用法详解
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下2016-06-06ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
这节介绍一个自己写的jQuery文本框字符限制插件,至于如何写插件,我这里就不多讲了,可以查看相关介绍,这里主要介绍下该插件的功能2012-02-023Z版基于jquery的图片复选框(asp.net+jquery)
最近在做一个彩票缩水工具,找了几个图片复选框插件始终感觉不太满意,自己动手山寨了一下imageTick插件.2010-04-04
最新评论