JS get img Picture High width

A problem was encountered when adding adaptive screen-size functionality to the Touchslider.js carousel code written by LJW in the previous period. No matter what method can not get to the high width of the IMG tag, and finally only give the picture a high-wide proportional value; I wrote a few demo tests when I was free today, and looked for the next reason, and listen to me, if there is something wrong, welcome to shoot Bricks ~ ~ ~

First to obtain a high-wide method with which I know: obj.style.width (height);

Obj.offsetwidth (offsetheight);

Obj.clientwidth (clientheight);

getComputedStyle and Currentstyle;

Obj.naturalwidth (Naturalheight)

For the sake of simplicity, here is only width for example.

First of all: Obj.style.width; This method, only in the label with the style attribute is written in the width of the size, you can get to the value, otherwise only return is empty. Look at the demo below:

<script>var IMGW = document.getElementsByTagName (' img ') [0].style.width;   alert (IMGW);  Returns a value of 400px, otherwise returns an empty;</script>

This method only adapts to adding the width value in the style attribute of the label, and adding the width value in the introduced style sheet (either link introduction or the use of the style tag in the HTML page) also gets a value that is not returned as null.

Then say a second method and a third method Obj.offsetwidth (offsetheight); Obj.clientwidth (clientheight); In general, if the label does not have padding values and border values set, then the two values they get are the same. But in many cases is not the case, in fact offsetwidth get is the width value +padding value +border value, clientwidth get the Width value +padding value, see the following demo:

<style>img{padding:20px;border:1px solid Red;} </style><script>var img = document.getElementsByTagName (' img ') [0],             imgoffsetwidth = img.offsetwidth,  //442px            imgclientwidth = Img.clientwidth;  440px;</script>

Note that now gets to the width of the IMG tag, which is added in the img tag style= "width:400px". If this attribute value is removed, then the value returned by the Imgoffsetwidth and Imgclientwidth in the demo above is the height-width value of the image itself. can be tested.

Also, getComputedStyle and Currentstyle are two ways to deal with compatibility, and the values obtained are the only high-width values of the pictures displayed on the screen, not the padding and border values of the IMG tags. But the getComputedStyle applies to the Firefox/ie9/safari/chrome/opera browser, Currentstyle applies to IE6/7/8. However, if the IMG tag does not have a style sheet, even if it is not set, then only getComputedStyle can get the value, which is the height of the picture itself, and Currentstyle returns auto. Here's a demo:

    <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 from the IMG tag and test it again.

The last is the Obj.naturalwidth (Naturalheight) method, which is a newly added method in HTML5 that gets the height of the element, but only applies to the Firefox/ie9/safari/chrome/opera browser. Here's a demo for each browser:

    <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 is important to note that in the Ie6/7/8 browser image.src is only obtained after the IMG image is fully loaded, otherwise it will be an error.

Referring to the full load of the picture, we solved the last time I met with ljw how to get the picture height problem;

Document.addeventlistener ("domcontentloaded", function () {       

That is to say, the above can get to the image of the height of the method is to take the picture has been fully loaded as a prerequisite.

Well, to my ability can only understand here, if there is something wrong, welcome to shoot Bricks ~ ~

JS get img Picture High width