复制代码代码如下:
<!Doctype HTML公共“ - // W3C // DTD XHTML 1.0 Transitional // en”“” http://www.org/tr/tr/xhtml1/dtd/xhtml1-xhtml1-transitional.transitional.dtdd'>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<头>
<meta http-equiv =“ content-type” content =“ text /html; charset = utf-8” />
<title> chrome下img加载对高度()的影响</title>
<style type =“ text/css”>
.floatleft {
浮子:左;
}
</style>
<script type =“ text/javascript” src =“ js/jquery-1.7.1.js”> </script>
<脚本类型=“ text/javascript”>
$(function(){
var img_h = $('。showimg')。height();
var img_w = $('。showimg')。width();
var text_h = $('。showText')。height();
$('。showResult')。html('showimg:' + img_w +'&' + img_h +'<br /> showtext:' + text_h);
警报('showimg:' + img_w +'&' + img_h +'<br /> showtext:' + text_h);
});
</script>
</head>
<! -
作者:北京-南宫
日期:2012-07-25
- >
<身体>
<div>
<div>
<img src =“ images /flash_pic.gif” />
</div>
<div>
这是文字
</div>
<div>
这里显示结果。
</div>
</div>
</body>
</html>
将此代码在chrome运行,当,警报窗口弹出时,将会发现页面的
运行结果如下:
这是文字
Showimg:112&0
ShowText:18
1 、此处 img的默认宽度为112,但是我链接的img的宽度为1000,
2 、此处 img的高度为0,
现做如下改动
复制代码代码如下:
<img src =“ images /flash_pic.gif” />
运行结果为:
这是文字
Showimg:1000&0
ShowText:18
IMG的高度仍旧为0
当为其设置高度之后,就可以正常获取到。,就可以正常获取到。
结论:在chrome下,img不设置宽高,通过jQuery width()和高度()获取到的img的宽高将为112px * 0
求助:希望哪位大侠有好办法,能在不设置宽高情况下获取到正确的值。,能在不设置宽高情况下获取到正确的值。