用js中的offsetWidth、offsetHeight如何获取图片(0.jpg)的宽度和高度?

0

3个回答

offsetWidth = width + border + width

0

图片说明

0
qq_39676085
W-yufang 刚刚运行的时候发现,获取不到图片的offsetWidth和offsetHeight,是因为js在执行的时候,图片还没加载出来,所以要把js代码放到window.onload里面,等图片加载完之后再执行js代码
一年多之前 回复

图片说明

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
【带图】讲解offsetHeight、offsetLeft、clientWidth、scrollHeigth、scrollTop等几个属性的区别
1.偏移量元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框的大小(注意,不包括外边距)。offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框的高度。offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft:元素的左外边框至包含元素...
前端学习之解决offset属性在加边框和不加边框之后数值变化问题
继续之前的在慕课网的前端学习,现在学习到了《JS动画效果》,在此记一些笔记。 在js中有些样式的值不能直接的获取,这个时候可以封装一个方法,通过系统的方法,获取想要的样式的值 function getStyle(obj, attr) { if(obj.currentStyle){ // IE浏览器 return obj.currentStyle[attr]; } else { // 火狐浏
兼容chrome与firefox使用offsetWidth得到不同值的问题
Ext3.x   Ext.MessageBox.alert 在chrome与firefox显示的宽度不一致问题   究其原因是因为msgEl.getWidth()得到的值不一致导致的   修正宽度应方法:   chrome:   rect = dom.getBoundingClientRect(); Math.ceil(rect.right - rect.left)   ...
offsetWidth 值为 0 ,明明有值
__.offsetWidth = 0; 因为父集用了display:none; 所以取不到值,将父集设置为display: block;就行了
[jQuery]无法准确获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
在开发一个弹框插件时,遇到一个需要计算隐藏弹框的高度问题。用jquery里面的方法$('box').outerHeight(true)得到隐藏层高度的值随着滚动条滚动总是不一致。没辙,放弃这一方法去获取,原来生js中的offsetHeight来试试看,$(''box")[0].offsetHeight,毫无疑问得到的值总是0。 为解决这个老大难问题,在网上看到另一较好的解决方法新增扩展jquer
js获取Html元素的实际宽度高度(offsetWidth)
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。 小结,因为id.offsetWidth和id.offsetHeight
详解JS位置、宽高属性之一:offset系列
很多初学者对于JavaScript中的offset、scroll、client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确。 图一   不知道大家看到这张图的第一感觉如何,反正我的感觉就是“这次第,怎一个乱字了得”。   既然我认为上图太多太乱,那么我就把offset、scroll、client分开说,希望能让大家彻底弄清楚,
火狐在需要获取div的高度时,往往需要用到offsetHeight为0的解决方法
火狐在需要获取div的高度时,往往需要用到offsetHeight,有时会碰到offsetHeight获取到为0的现象, 在使用IE或者火狐中,特别在目前div+css的方式,往往不定义div的高度,这是在添加div内容后,需要获取div的高度时,往往需要用到offsetHeight。 在使用中,有时会碰到offsetHeight获取到为0的现象,但如果你用各种JS调试工具调试,又能在对象
js获取精确宽度/高度(带小数位像素)
问题:用jquery获取div等块级元素的宽高时不能精确获取,只能得到整数部分像素,不能获取小数位px。请看下面事故:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
js监听窗口变化动态改变div大小
js监听窗口变化动态改变div大小 function getHeight(val) { this.processHeight=(window.innerHeight || document.documentElement.clientHeigh)-210 +'px'; } getHeight(1); //通过注册resize监听器,实现对窗口大小的监听 ...
js 动态获取图片的宽度和高度像素值
一、背景 1、后台数据表在设计的时候,对于每张图片,没有记录其宽度和高度的像素值。 2、图片的宽度和高度有不同的size,比如,A类型的图片是700*500像素,B类型的图片是700*1000像素 3、在前台有一块700*500像素的固定大小的图片展示区,用于展示各种size的图片 4、A类型的图片正常展示,B类型的图限高展示,即展示成350*500像素 5、无法通过其他字段区分A类型图
JS获取图片高度的值为0问题
很有可能是因为图片还未加载完毕,可以调整获取图片属性的位置。 Image 对象的属性 属性 描述 align 设置或返回与内联内容的对齐方式。 alt 设置或返回无法显示图像时的替代文本。 border 设置或返回图像周围的边框。 complete 返回浏览器是否已完成对图像的加载。 height 设置或返回图像的高度。 hspace...
JavaScript 获取图片的宽度和高度的方法
快速获取图片的宽高其实就是为了先做好排版布局做好准备,通过快速获取图片宽高的方法比如onload要节省甚多时间,甚至一分钟以上都有可能,并且这种方法适用于主流浏览器和低版本浏览器。 1、简陋获取宽高的方法 &amp;lt;script&amp;gt; /* 图片地址 加日期为了避免缓存 get请求 */ let img_url = 'images/front.jpg?'+Date.par...
隐藏的Swiper显示后无法获取正确的宽度和高度
今天在使用swiper的时候,元素默认是显示的时候没毛病,但是默认是隐藏的状态,再显示的时候发现滑动的时候宽度计算有误,如下图所示: 正确的显示如下:   隐藏的元素再次显示如下: 宽度计算有误   解决方案: 1 var mySwiper = myApp.swiper('.guest-wrapper',{ 2 freeMode : true, 3 slidesPerView...
js读取图片,获取并获取图片高度和宽度
if (window.FileReader) { var image = new Image(); var reader = new FileReader(); reader.readAsDataURL(file); //文件读取结束时间 reader.onload = function (e) { image.src = reader.re
瀑布流利用offsetHeight获取包裹块高度非实际值
                                        瀑布流利用offsetHeight获取包裹块高度非实际值原因:图片未加载,渲染。所以统计的高度不包含图片的高度。所以存在误差。解决办法:1.onload 之后,调用。2.延迟调用,setTimeout();我为人人,人人为我;美美与共,天下大同;...
JavaScript及jQuery中的各种宽高属性图解
原文链接 http://blog.poetries.top/2016/12/13/js-props 声明:本文根据慕课网学习视频整理 强烈建议打开控制台自己动手练习一遍,这样印象才会深刻第一部分 JavaScript中的宽高属性一、与window相关的宽高属性1.1 window.location和document.location window对象的location属性引用的是locatio
scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决
下面有每个属性详细的解释网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidt...
JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别
   首先定义一个div。 然后稍微装修一下 下面开始区分     一、clientWidth和clientHeigh 、 clientTop和clientLeft         1,clientWidth的实际宽度         clientWidth = width+左右padding         2,clientHeigh的实际高度          clien...
js中image获取不到width和heigth的问题
@Author LazyChun js中image的src赋值了,而image.width == 0 &amp;amp;&amp;amp; image.height == 0 今天做一个图片上传并做宽高限制的case,结果遇到这事了,搞了老半天,后来发现要这样写: 在 image的onload函数里可以获得width与heigth的值(单位:px)。...
解决使用offsetWidth让DIV自动变宽时出现的小BUG。
1.首先创建一个DIV盒子。给它加一个定时器,让它的宽度每隔30毫秒自动减1,观看效果。 2.上面的效果没有问题。然后你通过给DIV添加样式,给它加1px的边框。观看效果。 3.这是你会发现,你明明让DIV宽度减1,现在它的宽度会反而变长。 4.这是为什么呢?很明显这是加1px边框引起的问题。解释:因为offsetWidth是包含边框,外边距,内边距, 而DIV的宽度是100px。
js获取高度宽度的方法
总结一下,js获取屏幕、视口或者DOM元素高度宽度的方法 屏幕分辨率 window.screen.height window.screen.width 浏览器的屏幕的可用宽度(不包括任务栏) window.screen.availWidth window.screen.availHeight 网页可见区域 document.body.clientWidth do...
js获取图片宽高的方法
js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获。 一、简陋的获取图片方式 ? 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = ‘upload/2013/136436
或取offsetHeight值不正确
代码如下 最新资讯 大数据驱动下的微博社会化推荐 Unity全球领袖齐聚 Unite2016Shanghai精彩议题公布 网站安全检查渐成常态,盛邦安全带... var left = document.getElementById("content"); console.log("高度- - - - - - ->"+left.offsetHe
js获取原生图片的宽高
var myimage=http://baidu.com/img/data/upload/admin/5a321e69ab0db.jpg;                     if (typeof myimage.naturalWidth == "undefined") { // IE 6/7/8 var img = new Image(); img.src = myimage;
Vue中mounted钩子函数获取节点高度出错
遇到的问题 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错...
js获取图片的真实宽高
目的:用js获取图片真实的宽高适用场景:在有图片的页面中,需要点击图片查看原图如下图,这时就需要获取图片的原始宽高。js获取图片原始宽高:$(&quot;.comment-img img&quot;).each(function() { var image = new Image(); var src=$(this).attr(&quot;src&quot;); var realWidth=0;     var ...
document.body.offsetHeight等属性可能出现为0的时候
使用document.documentElement.clientHeight可以得到值
react结合js获取元素的高度
在做项目的过程中遇到一个问题,获取一个元素的高度的时候获取不到,具体代码如下 var box=document.getElementById(&quot;toppoint&quot;); console.log(box); console.log(box.offsetHeight); class PunchCard extends Compo...
获取隐藏元素的尺寸
平时要获取一个元素的尺寸一般都会直接使用offsetWidth和offsetHeight来获取,但是这两个属性是通过CSS渲染到页面上时候才计算的。而dispaly属性为none的元素将不参与渲染,它不会在渲染环境中生成任何盒子,自然也无法从属性中获取到尺寸。   offsetWidth和offsetHeight的值就是CSS在layout时的值,不参与渲染就自然不会layout,所以当然无法从
触发浏览器重绘的操作?
1.获取元素的offsetHeight属性 let rf = el.offsetHeight; // 主动触发浏览器重绘
js获取 图片的实际宽高,然后实现图片的瀑布流
这两天做了一下小页面,要求实现一个瀑布流,瀑布流中的图片尺寸需要随着上传的图片自动适配宽高,还要适配不同的手机。 这就需要先获取加载到的图片的实际尺寸,然后根据实际尺寸的宽高比例,然后再通过js获取实际手机的屏幕宽度,然后通过比例和手机宽度得到实际需要设置的图片的高度。 实际的思路如下: 1.首先获得手机的屏幕尺寸  var windowWidth = $(window).width();
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式// 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = new Image()// 改变图片的src img.src = img_url// 打印 alert('width:'+img.width+',height:'+img.height);结果如下:宽高都是
关于display:none元素的宽高获取问题
在做项目的时候碰到的这个问题,最后解决了,记录一下:分几种情况:1.正常情况 <div style="width:500px; height:300px;"> <div id="div1" style="width:100%; height:100%; background-color:red;"> <div id="child" style="widt
offsetHeight,offsetWidth.....那些易混淆的几个几个知识点
html dom对象中element对象的几个属性 element.offsetHeight 返回元素的高度。 element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平偏移位置。 element.offsetParent 返回元素的偏移容器。
JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。 我们一步一步进入这个过程。 一、简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11
java获取图片的宽度和高度
package com.suobei.test; import javax.imageio.ImageIO; import javax.swing.*; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; /** * 获取图片的宽度和高
JS通过offsetWidth和width获取div宽度的区别
1、通过document.getElementById("zhankaiStyle").style.width 或者是this.$refs.mingzi.style.width 获取 只能通过在行内样式表中设置宽度才可以获得 (1) &lt;div id="zhankaiStyle" ref="mingzi"&gt;这种获取div宽高的方式只能通过行内样式来获取&lt;/div&...
JS获取body及屏幕的宽度和高度
JS获取body及屏幕的宽度和高度
获取图片宽度和高度的方法
零: //先由http访问,如果可以正常访问图片,再取宽度和高度    public static boolean  isAskedByUrl(String urlStr){       try {          URL url = null;          url = new URL(urlStr);          HttpURLConnection  con = (HttpURLC...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 用js进行微信开发教程 乌班图中如何退出python