使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的

$("img").whith();(返回纯数字)
$("img").css("width");(返回字符串:数字+"px")

但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异

jquery有以下两种常用的jquery事件加载的方法

$(function(){});
window.onload=function(){}

第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还没有加载,比如图片等资源,但是DOM结构已经渲染成功了 
第二个呢,是在网页DOM结构渲染完成,而且资源已经加载成功以后调用的。

有没有感受出区别来呢,一个是在资源没有加载的时候调用的,一个是在资源加载结束,页面已经渲染之后调用的,所以当我们在$(function(){})调用$('img').width()的时候,由于图片还没有加载,所以这时候<img>标签的高度就是0,所以返回值就是0。但是当你用window.onload=function(){}调用的时候,图片已经加载出来了,所以这时候就能得到图片的高度。

js 获取div 图片高度的更多相关文章

  1. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  2. js获取div基础元素

    1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...

  3. JS获取IMG图片高宽

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...

  4. 动态获取div的高度 随着窗口变化而变化

    // 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...

  5. 获取div的高度

    1.获取div的文档总高度(必须DOM操作): var scrollHeight=document.getElementById("inner").scrollHeight; // ...

  6. js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  7. js获取div中的文本框数据

    通过div得到div里的所有数据 大神的世界无需解释,当然不是说我,当我看到这些代码的时候我惊呆了! 这是一个工具方法js: js: /* * 获取指定对象下的所有input.textarea值 * ...

  8. js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

    1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientH ...

  9. js 怎样获取div 图片等的宽度,只要值,不要px

    给你的div命名id=“abc”,js中用下面的语句就能获取到js的宽度并赋值给a a=document.all.abc.offsetWidth; 然后通过 alert(a); 就能弹出这个值来了.

随机推荐

  1. mysql 大数据量求平均值

    需求是:对于一个设备,求一天内每个小时的平均值,一个月内每天的平均值,更通用的需求是,从起始时间到结束时间,每隔一段时间,求一个平均值.目前的解决策略是:在存储过程中进行处理,从起始时间到结束时间,切 ...

  2. hdu 3117 Fibonacci Numbers

    这道题其实也是水题来的,求Fibonacci数的前4位和后4位,在n==40这里分界开.后4位不难求,因为n达到了10^18的规模,所以只能用矩阵快速幂来求了,但在输出后4位的时候一定要注意前导0的处 ...

  3. Javascript模块化编程(一):模块的写法 (转载 学习中。。。。)

    转载地址:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 阮一峰 大神:http://www.ruanyifeng.com/ ...

  4. Android入门:绑定本地服务

    一.绑定服务介绍   前面文章中讲过一般的通过startService开启的服务,当访问者关闭时,服务仍然存在: 但是如果存在这样一种情况:访问者需要与服务进行通信,则我们需要将访问者与服务进行绑定: ...

  5. c++ 对象内存分配和虚函数

    1. c++类对象(不含虚函数)在内存中的分布 c++类中有四种成员:静态数据.非静态数据.静态函数.非静态函数. 1. 非静态数据成员放在每个对象内部,作为对象专有的数据成员 2. 静态数据成员被抽 ...

  6. 【论文阅读记录】Real-Time Correlative Scan Matching

    这篇文章是谷歌的Cartograph中实现real_time_correlative_scan_matcher的论文 Real-Time Correlative Scan MatchingEdwin ...

  7. 任务调度quartz

    http://www.cnblogs.com/cnjava/archive/2013/02/28/2937291.html

  8. OpenCV3编程入门笔记(6)自我验证各函数程序代码

    // asw.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <opencv2/opencv.hpp> usi ...

  9. 虚拟机装centos 桥接方式上网[转]

    http://blog.csdn.net/sunbiao0526/article/details/6804127   虚拟机选择bridge方式连接网络 首先 vi /etc/sysconfig/ne ...

  10. Nemo Documents – 给文件添加标签 以日历的形式将文件呈现出来,很像 Outlook,你可以根据年、月、日来查看不同类型的文档

    Nemo Documents – 给文件添加标签   scavin(Google+) on 2012.03.28. Nemo Documents 是款文件组织管理工具(文档管理器),不是街道大妈胜似大 ...