Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
Influence of IMG loading on height () under <title>chrome </title>
<style type= "Text/css" >
. floatleft {
Float:left;
}
</style>
<script type= "Text/javascript" src= "Js/jquery-1.7.1.js" ></script>
<script type= "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);
Alert (' showimg: ' + img_w + ' & ' + img_h + ' <br/>showtext: ' + text_h);
});
</script>
<!--
Author: BEIJING-Nangong
Date: 2012-07-25
-->
<body>
<div class= "Floatleft" >
<div class= "Showimg" >
</div>
<div class= "Showtext" >
This is the text
</div>
<div class= "Showresult" >
The results are shown here.
</div>
</div>
</body>
Run this code in Chrome, and when the alert window pops up, you'll see that the page's IMG is not loaded.
The results of the operation are as follows:
This is the text
Showimg:112&0
Showtext:18
1, the default width of img Here is 112, but I link the img width of 1000,
2, here the IMG's height is 0,
Now make the following changes
Copy Code code as follows:
The results of the operation are:
This is the text
Showimg:1000&0
Showtext:18
The IMG still has a height of 0.
When you set a height for it, you can get it normally.
Conclusion: Under the Chrome, IMG does not set the width high, through the jquery width () and the height () obtains the IMG The width high will be 112px * 0
Help: I hope that heroes have a good way, can not set the width of the case to get the correct value.
