Rumah > hujung hadapan web > tutorial js > 关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

WBOY
Lepaskan: 2016-05-16 18:14:14
asal
1591 orang telah melayarinya

先来看现象:

复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<div id='aa' style='width:200px;height:200px;' /></script>
");
alert($("#aa").width());
});


结果为:200
所有浏览器都得到正确的结果

把插入的元素改为IMG
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>alert($("#aa").width()); <BR>}); <BR></script>

(注:image1.jpg的实际宽为693)

结果为:
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

再F5刷新一下,结果为:
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始终为0。

应该可以理解为在图片没有加载或呈现完成时计算出的图片宽高也是不正确的,刷新后应该是有了缓存,所以结果就正确了,但为什么Chrome

和Safari始终都为0呢?而且IE和OPERA居然一开始还会计算出一个错误值出来的。
改成下面这样就都好了:
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>window.setTimeout(function(){alert($("#aa").width()); },100); <BR>}); <BR></script>

有解决过此问题或有关于此问题更详细的认识的大鸟还望不吝赐教..
复制代码 代码如下:

$(document).ready(function() {
$("#cc").append("关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery");
$("#aa").load(function(){
alert($("#aa").width()
}).attr("src", "http://www.jb51.net/images/logo.gif");
});
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan