Ich habe mich gefragt, ob es eine einfache Möglichkeit gibt, die CSS-Klassen in JavaScript zu ändern. Ich habe alle ähnlichen Fragen hier durchgegangen und konnte keine einfache und unkomplizierte Lösung finden.

Ich versuche, die Breite und Höhe von a festzulegen<div> um ein Bild zu finden, das ich auf meiner Website habe (beim Laden). Ich kenne die Bildabmessungen bereits und kann mein CSS darauf einstellen - aber ich möchte, dass mein Skript dies selbst herausfindet.

Nach stundenlanger Forschung und Entwicklung (ich bin Anfänger) habe ich mir Folgendes ausgedacht:

var myImg = new Image();

myImg.src = "img/default.jpg";

myImg.onload = function(){

    var imgWidth = this.width;
    var imgHeight = this.height;

    document.getElementById("myBg").setAttribute('style', "height :"+ imgHeight + "px");
    document.getElementById("myBg").setAttribute('style', "width :"+ imgWidth + "px");

};

Dadurch wird jedoch nur die Breite des Elements mit der ID "myBg" festgelegt. Wenn ich die Reihenfolge von Höhe und Breite umdrehe, wird die Höhe nur auf die Höhe des Bildes eingestellt. Es scheint, als würde zuerst die Höhe des Elements auf die Bildhöhe eingestellt, aber direkt nachdem es zur nächsten Anweisung verschoben wurde, um die Breite einzustellen, wird der Höhenwert auf das zurückgesetzt, was ursprünglich in CSS definiert wurde.

Ich habe online weiter recherchiert und es scheint, als wäre das Ändern der CSS (Einfügen neuer Attribute, Entfernen usw.) mit JavaScript keine leichte Aufgabe. Es ist vollbracht durch

document.styleSheets[i].cssRules[i]  or  document.styleSheets[i].addRule

Art von Befehlen, aber alle Tutorials online und hier auf Stapelüberlauf waren verwirrend und kompliziert.

Ich habe mich gefragt, ob jemand, der mit document.styleSheets vertraut ist, mir das einfach erklären kann.

Stellen Sie sich vor, ich habe diese Klasse in meiner separaten CSS-Datei:

.container
{
    height: 600px;
    width: 500px;
}

Ich möchte, dass sich Höhe und Breite beim Laden an die Größe des Bildes anpassen. Wie mache ich das?

Ich möchte kein neues "style" -Element in meiner HTML-Datei definieren, sondern die CSS-Datei ändern.Ich sollte die Bildgröße nicht kennen, bevor sie auf die Seite geladen wird.Keine Frage, ich möchte dies nur mit Standard-JavaScript tun.

Danke.