js 获取div 图片高度

使用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 图片高度

时间: 2024-08-29 17:28:44

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

vue-cli在打包后js获取的图片路径错误问题时候

在用npm run build 打包的时候,正常img标签中的src图片路径和css中的图片路径是可以正常识别的, 但是在打包js获取的图片路径时,打包后无法找到图片,原因是 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的). 如果你是vue-cli初始化的项目,解决的办法:第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/s

JS获取IMG图片高宽

前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有:obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getCo

js获取div的坐标

html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如何方法可以实现. Js代码   /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj == 'string'){ divObj=com.whuang.h

js获取div中的文本框数据

通过div得到div里的所有数据 大神的世界无需解释,当然不是说我,当我看到这些代码的时候我惊呆了! 这是一个工具方法js: js: /* * 获取指定对象下的所有input.textarea值 * divid:外层的id * jsonStr:如果无,新创建一个对象,如果有,直接在对象中添加 * isCheck:是否进行必填项判断 */ getFormParam: function(divid,jsonStr,isCheck){ var inputlist = $("#"+divid+

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

1.获取窗口可视范围的高度 1 //获取窗口可视范围的高度 2 function getClientHeight(){ 3 var clientHeight=0; 4 if(document.body.clientHeight&&document.documentElement.clientHeight){ 5 var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?doc

js 获取div的类及js控制图片垂直居中

js没有document.getElementByClassName 这个方法,只能通过id控制,那就简单的写个方法获取class的方法.代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>app_details</title> <meta name="description" content="

js获取可视区域高度

1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clientHeight ==> BODY对象高度 3 document.documentElement.clientWidth ==> 可见区域宽度 4 document.documentElement.clientHeight ==> 可见区域高度 5 6 网页可见区域宽: document.body.clientWidth 7 网页可见区域高: document.

js获取div相对屏幕的坐标位置

1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.getBoundingClientRect().top; return {x:x,y:y}; } 参数传js原生对象 getDivPosition($('#div0')[0]).x getDivPosition($('#div0')[0]).y  

js获取文档高度

网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc