Vor einiger Zeit habe ich auf ein Problem gestoßen, als ich den von LJW geschriebenen Touchslider.js -Karussellcode der adaptiven Bildschirmgröße hinzugefügt habe. Egal welche Methode verwendet wird, Sie können nicht die Höhe und Breite des IMG -Tags erhalten. Am Ende können Sie nur ein Verhältnis von Höhe und Breite für das Bild festlegen. Ich habe ein paar Demos geschrieben, um es zu testen, während ich heute Zeit habe und den Grund gefunden hat. Lassen Sie es mich im Detail erklären. Wenn etwas daran nicht stimmt, können Sie sich gerne ein Bild machen ~~~
Erstens sind die Methoden zum Erhalten von Größe und Breite so weit wie ich weiß:
obj.style.width (Höhe);
obj.offsetwidth (offseteight);
obj.clientwidth (ClientHeight);
GetComputedstyle und CurrentStyle;
OBJ.Naturalwidth (Naturalheight)
Aus Einfachheit der Erzählung ist hier nur eine Breite als Beispiel.
Sprechen wir zuerst über die erste Methode: obj.style.width; Diese Methode kann nur den Wert abrufen, wenn die Breite mithilfe des Style -Attributs in das Etikett geschrieben ist. Andernfalls ist der zurückgegebene Wert leer. Schauen Sie sich die folgende Demo an:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> var imgw = document.getElementsByTagName ('img') [0] .Style.Width; Alarm (IMGW); // Der Rückgabewert beträgt 400px, andernfalls wird er leer zurückgegeben. </script>Die obige Methode gilt nur für das Hinzufügen des Breitenwerts zum Style -Attribut des Tags. Das Hinzufügen von Breitwert zu dem importierten Stilblatt (unabhängig davon, ob es aus dem Link oder dem Style -Tag in der HTML -Seite importiert wird), erhält er nicht den Wert und gibt es leer zurück.
Sprechen wir dann über die zweite Methode und die dritte Methode obj.offsetwidth (offseteight); obj.clientwidth (ClientHeight); Im Allgemeinen sind die beiden erhaltenen Werte im Allgemeinen den Polsterwert und den Grenzwert festgelegt. In vielen Fällen ist dies jedoch nicht der Fall. Tatsächlich erhält die Offsetwidth den Breitenwert + Padding -Wert + Grenzwert, die Clientbreite erhält den Breitenwert + Padding -Wert, siehe folgende 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>Beachten Sie, dass die Breite des IMG -Tags, das Sie erhalten, das Style = "Breite: 400px" ist, der dem IMG -Tag hinzugefügt wurde. Wenn dieser Eigenschaftswert entfernt wird, sind die von Imgoffsetwidths und IMGCLientwidth in der obigen Demo zurückgegebenen Werte die Höhe und Breite des Bildes selbst. Sie können es versuchen.
Darüber hinaus sind GetComputedStyle und CurrentStyle zwei Methoden zur Verarbeitungskompatibilität. Die erhaltenen Werte sind nur die auf dem Bildschirm angezeigten Höhe und Breite des Bildes. Die Polster- und Grenzwerte des IMG -Tags werden nicht erhalten; Aber GetComputedStyle ist für Firefox/IE9/Safari/Chrome/Opera -Browser geeignet, und CurrentStyle ist für IE6/7/8 geeignet. Wenn das IMG -Tag jedoch kein Style -Blatt einführt, selbst wenn es das Style -Attribut nicht festlegt, kann GetComputedStyle nur den Wert erhalten, dh die Höhe und Breite des Bildes selbst, und CurrentStyle gibt automatisch zurück. Hier ist eine Demo:
<img src = "http://img.hb.aicdn.com/787bf87d05Ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <Script> Funktion> Funktion "scriptdstyle) {El, name) {if (fondows. scriptdstyle) {el, name) {ift window.getComputedStyle (el, null) [Name]; } else {return El.CurrentStyle [Name]; }} var div = document.getElementsByTagName ('img') [0]; alarm (getStyle (div, 'width')); </script>Sie können das Style -Attribut im IMG -Tag entfernen und es dann testen.
Schließlich gibt es die methode obj.naturalwidth (naturheigheight), die eine neu hinzugefügte Methode ist, um die Höhe und Breite der Elemente in HTML5 zu erhalten, aber es gilt nur für Firefox/IE9/Safari/Chrome/Opera -Browser. Hier ist eine Demo für jeden Browser:
<img src = "http://img.hb.aicdn.com/787bf87d05Ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <Script> Dokumentation.addeventListieren ('Domcontentled', Funktion (addeventListieren ('Domcontentled', Funktion (addeventListener ('Domcontentled' () (addeventListener ('domcontentled', function GetImgnaturalStyle (IMG, Rückruf) {var nwidth, nHeight if (img.naturalwidth) {// moderner Browser nwidth = img.naturalwidth nHeight = img.naturalheight} {// IE6/7/8 var iMGAE = new ine GEWEGS function () {callback (image.width, image.height)}} return [nWidth, nHeight]} var img = document.getElementsByTagName ('img') [0], Imgnatural = GetImglaturalStyle (img); </script>Es ist zu beachten, dass im IE6/7/8 -Browserbild.src erst nach voll geladenem IMG -Bild erhalten wird, da sonst ein Fehler gemeldet wird.
Wenn es um das vollständige Laden des Bildes geht, löst es das Problem, dass das, das ich beim letzten Mal begegnet bin, die Bildhöhe nicht erhalten kann.
document.adDeVentListener ("DomcontentLoded", function () {// Der Grund dafür ist, dass unser Code in einer solchen Umgebung geschrieben wurde. Zu diesem Zeitpunkt wurde das IMG -Tag geladen, dh nur die Dom -Struktur gibt, und das Bild wurde nicht vollständig geladen, sodass die erhaltenen Werte alle 0, aber wenn wir in der Fenster geschrieben wurden.Mit anderen Worten, die obigen Methoden, um die Höhe und Breite des Bildes zu erhalten, müssen auf der Prämisse beruhen, dass das Bild vollständig geladen wurde.
Okay, mit meiner Fähigkeit kann ich das nur verstehen. Wenn etwas falsch ist, können Sie sich gerne ein Bild machen ~~
Das obige einfache Beispiel dafür, dass JS die Höhe und Breite von IMG -Bildern erhalten, ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.