JS obtains a simple example of IMG image height and width

Some time ago, I encountered a problem when I added the adaptive screen size function to the touchslider.js carousel code written by LJW. No matter what method is used, you can't get the height and width of the IMG tag. In the end, you can only set a ratio of the height and width for the picture. I wrote a few demos to test it while I have time today and found the reason. Let me explain it in detail. If there is anything wrong with it, please feel free to take a picture~~~

First of all, the methods for obtaining height and width are as far as I know:

obj.style.width(height);

obj.offsetWidth(offsetHeight);

obj.clientWidth(clientHeight);

getComputedStyle and currentStyle;

obj.naturalWidth(naturalHeight)

For the sake of simplicity of narrative, here is just a width as an example.

Let’s talk about the first method first: obj.style.width; this method can only get the value if the width is written in the label using the style attribute, otherwise the returned value will be empty. Look at the following demo:

 <img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"><script>var imgW = document.getElementsByTagName('img')[0].style.width; alert(imgW); //The return value is 400px, otherwise it will return empty; </script>

The above method only applies to adding width value to the style attribute of the tag. Adding width value to the imported style sheet (whether it is imported from the link or the style tag in the html page) will not get the value and return it is empty.

Then let’s talk about the second method and the third method obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); Generally speaking, if the label does not set the padding value and border value, then the two obtained values are the same. But in many cases this is not the case. In fact, offsetWidth gets the width value + padding value + border value, clientWidth gets the width value + padding value, see the following demo:

 <style>img{ padding:20px;border:1px solid red;}</style><img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"><script>var img = document.getElementsByTagName('img')[0], imgOffsetWidth = img.offsetWidth, //442px imgClientWidth = img.clientWidth; //440px;</script>

Note that the width of the img tag you get is the style="width:400px" added to the img tag. If this property value is removed, then the values returned by imgOffsetWidth and imgClientWidth in the above demo are the height and width values of the image itself. You can try it.

In addition, getComputedStyle and currentStyle are two methods of processing compatibility. The obtained values are only the height and width values of the image displayed on the screen. The padding and border values of the img tag will not be obtained; but getComputedStyle is suitable for Firefox/IE9/Safari/Chrome/Opera browsers, and currentStyle is suitable for IE6/7/8. However, if the img tag does not introduce a style sheet even if it does not set the style attribute, then only getComputedStyle can get the value, that is, the height and width value of the image itself, and currentStyle returns auto. Here is a demo:

 <img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"> <script> function getStyle(el, name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null)[name]; }else{ return el.currentStyle[name]; } } var div = document.getElementsByTagName('img')[0]; alert(getStyle(div, 'width')); </script>

You can remove the style attribute in the img tag and then test it.

Finally, there is the obj.naturalWidth(naturalHeight) method, which is a newly added method to get the height and width of elements in HTML5, but it is only applicable to Firefox/IE9/Safari/Chrome/Opera browser. Here is a demo for each browser:

 <img src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"> <script> document.addEventListener('DOMContentLoaded',function(){ function getImgNaturalStyle(img,callback) { var nWidth, nHeight if (img.naturalWidth) { // Modern browser nWidth = img.naturalWidth nHeight = img.naturalHeight } else { // IE6/7/8 var imgae = new Image(); image.src = img.src; image.onload = function(){ callback(image.width, image.height) } } return [nWidth, nHeight] } var img = document.getElementsByTagName('img')[0], imgNatural = getImgNaturalStyle(img); alert(imgNatural); }); </script>

It should be noted that in IE6/7/8 browser image.src is only obtained after the img image is fully loaded, otherwise an error will be reported.

When it comes to the complete loading of the image, it solves the problem that the one I encountered last time, cannot get the image height;

 document.addEventListener("DOMContentLoaded", function(){ //The reason is that our code was written in such an environment. At this time, the img tag was loaded, that is, there is only the DOM structure, and the image has not been fully loaded, so the obtained values are all 0, but if we write in the window.onloaded environment, we can get the height and width shown});

In other words, the above methods to obtain the height and width of the image must be based on the premise that the image has been completely loaded.

Okay, with my ability, I can only understand this. If there is anything wrong, please feel free to take a picture~~

The above simple example of JS obtaining the height and width of IMG pictures is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.