JS get img Picture High width Simple example _javascript technique

A problem was encountered while adding the adaptive screen Size feature to the Touchslider.js carousel code written by LJW in the previous period. You can't get the high width of the IMG tag in any way, finally, only to the picture to set a high width of the proportional value; I wrote a few demo tests under today's time, looking for the next reason; and listen to me carefully, if there is no wrong, welcome to Pat Bricks ~ ~ ~

First get the high width method with what I know:

Obj.style.width (height);

Obj.offsetwidth (offsetheight);

Obj.clientwidth (clientheight);

getComputedStyle and Currentstyle;

Obj.naturalwidth (Naturalheight)

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

The first way: Obj.style.width, this method, only in the label with the style attribute in the width of the size, you can get to the value, otherwise only returned empty. Look at the demo below:

<script>
var imgw = document.getelementsbytagname (' img ') [0].style.width;
  alert (IMGW); The return value is 400px, otherwise null is returned;
</script>

The above method only adapts to adding a width value in the tag's style attribute, adding a width value in the introduced style sheet (whether the link is introduced or using the style label in the HTML page), and the value is not obtained, and the return is null.

Then say the second method Obj.offsetwidth (offsetheight) with the third method; Obj.clientwidth (clientheight); In general, if the labels do not set padding values and border values, then the two values they get are the same. But in many cases is not the case, in fact offsetwidth is the width value +padding value +border value, ClientWidth get is 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>

Notice that the width of the img tag you get now is the style= "width:400px" added to the IMG tag. If this attribute value is removed, then the value returned by the Imgoffsetwidth and Imgclientwidth in the demo above is the high width of the picture itself. can be tried.

In another place, getComputedStyle and Currentstyle are two methods of handling compatibility, get the value is the picture on the screen only the high width of the picture, will not get the IMG tag padding and border values But where getComputedStyle applies to Firefox/ie9/safari/chrome/opera browsers, Currentstyle applies to IE6/7/8. However, if the IMG tag does not introduce a style sheet without setting the Style property, only getComputedStyle can get the value, that is, the picture itself is a high width, 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 to get the element's height, but only for Firefox/ie9/safari/chrome/opera browsers. Here's a demo that works 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>

You need to be aware of it. In the Ie6/7/8 browser IMAGE.SRC only after the IMG picture is fully loaded out of the acquisition, or will be an error.

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

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

    //The reason is that our code was written in such an environment, this time, just loaded the IMG tag, that is, only the DOM structure , the picture has not been fully loaded, so the value obtained is 0, but if you write in the window.onloaded environment, you can get the height of its width.

In other words, the above can get the image of the high width of the method must be the picture has been fully loaded as a prerequisite.

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

The above JS get img Picture High Width Simple example is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.