Il y a quelque temps, j'ai rencontré un problème lorsque j'ai ajouté la fonction de taille d'écran adaptative au code de carrousel touchslider.js écrit par LJW. Quelle que soit la méthode utilisée, vous ne pouvez pas obtenir la hauteur et la largeur de la balise IMG. En fin de compte, vous ne pouvez définir qu'un rapport de la hauteur et de la largeur pour l'image. J'ai écrit quelques démos pour le tester pendant que j'ai du temps aujourd'hui et j'ai trouvé la raison. Permettez-moi de l'expliquer en détail. S'il y a quelque chose qui ne va pas, n'hésitez pas à prendre une photo ~~~
Tout d'abord, les méthodes d'obtention de la hauteur et de la largeur sont aussi loin que je sache:
obj.style.width (hauteur);
obj.offsetwidth (OffSetheight);
obj.clientwidth (ClientHeight);
GetCompuledStyle et CurrentStyle;
OBJ.Naturalwidth (Naturalheight)
Par souci de simplicité du récit, voici juste une largeur comme exemple.
Parlons d'abord de la première méthode: obj.style.width; Cette méthode ne peut obtenir la valeur que si la largeur est écrite dans l'étiquette à l'aide de l'attribut de style, sinon la valeur retournée sera vide. Regardez la démo suivante:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <cript> var imgw = document.getElementsByTagName ('img') [0] .style.width; alerte (IMGW); // La valeur de retour est de 400px, sinon elle reviendra vide; </cript>La méthode ci-dessus s'applique uniquement à l'ajout de valeur de largeur à l'attribut de style de la balise. L'ajout de valeur de largeur à la feuille de style importée (qu'il soit importé du lien ou de la balise de style de la page HTML) n'obtiendra pas la valeur et le renvoie est vide.
Parlons ensuite de la deuxième méthode et de la troisième méthode obj.offsetwidth (OffSetheight); obj.clientwidth (ClientHeight); D'une manière générale, si l'étiquette ne définit pas la valeur de rembourrage et la valeur de la bordure, les deux valeurs obtenues sont les mêmes. Mais dans de nombreux cas, ce n'est pas le cas. En fait, OffsetWidth obtient la valeur de largeur + valeur de rembourrage + valeur de bordure, ClientWidth obtient la valeur de largeur + la valeur de rembourrage, voir la démo suivante:
<style> img {padding: 20px; bordure: 1px solide rouge;} </ style> <img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658" = document.getElementsByTagName ('img') [0], imgoffSetWidth = img.offsetWidth, // 442px imgClientWidth = img.clientWidth; // 440px; </cript>Notez que la largeur de la balise IMG que vous obtenez est le style = "width: 400px" ajouté à la balise IMG. Si cette valeur de propriété est supprimée, les valeurs renvoyées par IMGOffSetWidth et IMGClientWidth dans la démo ci-dessus sont les valeurs de hauteur et de largeur de l'image elle-même. Vous pouvez l'essayer.
De plus, GetCompuledStyle et CurrentStyle sont deux méthodes de compatibilité du traitement. Les valeurs obtenues ne sont que les valeurs de hauteur et de largeur de l'image affichées à l'écran. Le rembourrage et les valeurs de bordure de la balise IMG ne seront pas obtenus; Mais GetComputedStyle convient aux navigateurs Firefox / IE9 / Safari / Chrome / Opera, et Current Style convient à IE6 / 7/8. Cependant, si la balise IMG n'introduit pas de feuille de style même si elle ne définit pas l'attribut de style, seul GetCompuledStyle peut obtenir la valeur, c'est-à-dire la hauteur et la valeur de largeur de l'image elle-même, et CurrentStyle renvoie l'auto. Voici une démo:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> function GetStyle (El, nom) {if (window window.getCompuledStyle (el, null) [name]; } else {return el.currentStyle [name]; }} var div = document.getElementsByTagName ('img') [0]; alert (getStyle (div, 'width')); </cript>Vous pouvez supprimer l'attribut de style dans la balise IMG, puis le tester.
Enfin, il existe la méthode OBJ.Naturalwidth (Naturalheight), qui est une méthode nouvellement ajoutée pour obtenir la hauteur et la largeur des éléments dans HTML5, mais elle ne s'applique qu'à Firefox / IE9 / SAFARI / Chrome / Opera Browser. Voici une démo pour chaque navigateur:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> document.addeventListener ('DOMCONTENTED', fonction () {furet> {function (funder> {function (funder> {function (funder> {funder> {function (funder> {funder> {function (function (funder> {function (funder> {funder> {function (funder> fure getImGnaturalStyle (img, rappel) {var nwidth, nheight if (img.naturalwidth) {// Browser moderne nwidth = img.naturalwidth nheight = iMg.naturalHeight} else {// ie6 / 7/8 var imgae = new Image (); function () {callback (image.width, image.Height)}} return [nwidth, nheight]} var img = document.getElementsByTagName ('img') [0], imgnatal = getImgnatalStyle (img); </cript>Il convient de noter que dans l'image du navigateur IE6 / 7/8.SRC n'est obtenu qu'après que l'image IMG est complètement chargée, sinon une erreur sera signalée.
En ce qui concerne le chargement complet de l'image, il résout le problème que celui que j'ai rencontré la dernière fois ne peut pas obtenir la hauteur de l'image;
document.addeventListener ("DomContentloaded", function () {// La raison en est que notre code a été écrit dans un tel environnement. À l'heure actuelle, la balise IMG a été chargée, c'est-à-dire qu'il n'y a que la structure DOM, et l'image n'a pas été entièrement chargée, nous pouvons obtenir la hauteur et la largeur montrée});En d'autres termes, les méthodes ci-dessus pour obtenir la hauteur et la largeur de l'image doivent être basées sur la prémisse que l'image a été complètement chargée.
D'accord, avec mes capacités, je ne peux comprendre que cela. S'il y a quelque chose de mal, n'hésitez pas à prendre une photo ~~
L'exemple simple ci-dessus de JS obtenant la hauteur et la largeur des images IMG est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.