Ändern von CSS-Klassen mit Javascript

Ich Frage mich, ob es eine einfache Möglichkeit zum ändern der CSS-Klassen in JavaScript.
Ich habe gegangen durch alle anderen ähnlichen Fragen hier und ich konnte Sie nicht finden, eine geradlinige und einfache Lösung.

was ich versuche zu tun ist, um die Breite und Höhe des <div> zu entsprechen, ein Bild, dass ich auf meiner Seite (beim laden). Ich weiß schon, die Bild-Dimensionen, und ich kann mein CSS an, aber ich will, dass mein Skript, um dies herauszufinden, auf Ihre eigenen.

Stunden nach der r&d (ich bin ein Anfänger), das ist, was ich kam mit:

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");

};

Jedoch, diese bestimmt lediglich die Breite des Elements mit der id "myBg". Wenn ich die Reihenfolge der Höhe und Breite, dann ist es nur setzt die Höhe auf die Höhe des Bildes.
Es scheint, wie es zunächst setzt die Höhe des Elements auf die Höhe des Bildes, aber Recht, nachdem Sie bewegt, um die nächste Anweisung festlegen, die Breite, die Höhe geht zurück zu dem, was Sie definiert, was ursprünglich in css.

Habe ich weitere online-Forschung, und scheint, wie die änderung der css (einfügen neuer Attribute, entfernen, etc.) mit JavaScript ist nicht eine einfache Aufgabe. Es wird durch

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

Art der Befehle, aber alle tutorials der online-und hier auf stackoverflow waren verwirrend und kompliziert.

Ich Frage mich, wenn jemand vertraut mit dem Dokument.styleSheets können erklären, dies für mich einfach?

Vorstellen, ich habe diese Klasse in meine eigene css-Datei:

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

Möchte ich die Höhe und Breite zu ändern, um die dimension des Bildes nach dem laden. Wie mache ich das?

Ich nicht wollen, definieren Sie eine neue "style" - element in meiner html Datei, will ich ändern, die css-Datei.
Ich bin eigentlich nicht wissen, dass das Bild dimension, bevor Sie die Lasten auf die Seite.
kein jquery bitte, ich möchte das nur mit standard-JavaScript.

Danke.

Sie können nicht ändern, die CSS, da es bereits geladen ist. Aber Sie können ändern Sie die Werte aller CSS-Elemente, einschließlich Höhe und Breite mit JavaScript.
statt setAttribute des Dokuments verwenden.getElementById("myBg").Stil.width= imgWidth + "px"; document.getElementById("myBg").Stil.height= imgHeight + "px";
Eigentlich kann man sich ändern Sie die CSS nach dem laden, wenn es nicht die beste Lösung hier.
Ich glaube, ich könnte gesagt haben, das ist besser. In jedem Fall gibt es zwei Antworten, die im wesentlichen geklärt ist die beste Methode.
Ihre "ändern Sie die CSS" - link in der Nähe, was ich versucht habe, zu lernen. jetzt mein problem gelöst ist, ohne mit "stylesheets" . aber ich fühle, dass ich brauche, um zu lernen, Ihre Methode, wenn ich will ein guter javascript-Programmierer. danke

InformationsquelleAutor pouya zad | 2014-04-28

css javascript

11

Den Grund, nur das eine oder andere funktioniert, weil in deinem zweiten code-Zeile, du zerstörst die ganze style Attribut, und erstellen Sie es neu. Beachten Sie, dass setAttribute() überschreibt das gesamte Attribut.

Eine bessere Lösung wäre, um die element.style Eigenschaft, die nicht das Attribut;
```
var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";
```
Können Sie packen alle Elemente mit der Klasse container und wenden Sie es auf jedem von Ihnen wie diese:
```
var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
    elements[i].style.width = imgWidth + "px";
    elements[i].style.height = imgHeight + "px";
}
```
Hinweis querySelectorAll ist nicht unterstützt von IE7 oder niedriger, wenn Sie benötigt wird, dann gibt es Distanzscheiben für getElementsByClassName() hier auf SO.

Danke das ist mein problem gelöst. aber auch andere Elemente mit class=container immer noch, was es war, definiert in der css.ich bin gut für jetzt, aber für den Lern-Willen), würde ich gerne wissen, wie man hange die Klasse container, wenn möglich mit dem Dokument.styleSheets
Siehe aktualisierte Antwort.
danke, das half
sorry, dich wieder zu stören. also setAttribute() funktioniert nur, wenn ich bin nur versuchen, das zu ändern, ein Attribut? wenn mehr als ein ähnlich zu meinem Fall dann setAttribute() ist nutzlos?
setAttribute kann sich nur ändern ein html-Attribut, style ist ein Attribut wie z.B. <div style="">, id ist ein Attribut <div id="">. Aber wenn Sie es verwenden, um set-Stil, Sie können mehrere CSS-Eigenschaften wie z.B. <div style="height:100px;width:200px;">

InformationsquelleAutor MrCode

Wenn Ihr Regeln beginnen Inkrementieren ziehen Sie Ihr css in eine neue Klasse und switch-Klassen:

CSS:

.container-1{
  /* A set of rules */
}
.container-2{
  /* A set of rules */
}

JavaScript:

element.className = element.className.replace(/container-1/, 'container-2')

InformationsquelleAutor juanpastas

0
```
var object = document.createElement('container');
object.style.width= "500px";
object.style.height= "600px";
```
Können Sie auch das hinzufügen von Werten für diese, wenn Sie halten Sie die Abmessungen in Variablen
```
var height = 600;
var width = 500;
```
Können Sie erhöhen, wenn nötig
```
height += 5;
```
Hier ist etwas, was Sie vielleicht nützlich finden. Es kann Ihnen einige Einblicke, wie Sie ein problem lösen, mit dem viele verschiedene Ansätze, zu sehen, wie wenn Sie neu in js.

InformationsquelleAutor Josef E.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.