Nach dem Lesen der "Implementierungsmethode zum dynamischen Erstellen oder Hinzufügen von CSS -Style -Blättern mit JavaScript" können Sie leicht herausfinden, wie Sie CSS -Stilblätter ändern können.
Ich habe heute einen Freund im Forum getroffen und diese Frage gestellt:
<Styles> .ls {width = 120px;} </style> <script> // Fügen Sie hier einen Satz hinzu, um den Wert der Breite in .ls zu ändern, wie es zu schreiben </script>Einige Freunde antworteten: "Wenn es viele Objekte mit .LS gibt, ist es wirklich unpraktisch, JS zu verwenden, JQuery ist bequem, $ (". LS "). Breite (200); das ist in Ordnung."
Er möchte JQs Class Selector.ls verwenden, um alle Objekte auszuwählen, die diesen Stil verwenden, und sie einzeln einstellen, anstatt das CSS -Stilblatt zu ändern, sodass Bedenken hinsichtlich "viele Objekte" sind.
Das Problem ist jedoch, dass dies nur den spezifischen Ausdrucksstil dieser Objekte verändert, nicht die Einstellungen von .ls. Wenn ein anderes Element, das den Style -Style -Stil verwendet, erscheint, wird es immer noch gleich sein. Sie müssen dieses Element noch einmal anpassen, um die Symptome zu behandeln, aber nicht die Grundursache. Darüber hinaus bestimmt diese Methode auch, dass es unmöglich ist, sie einfach in einem Satz zu erreichen.
Es gibt einige Leute, die darüber nachdenken, und wenn Sie den Artikel "Implementierungsmethode zum Erstellen oder Hinzufügen von CSS -Stilblättern mit JavaScript" lesen, werden Sie glaube, dass Sie leicht darüber nachdenken werden, wie dieses Problem in einem Satz gelöst werden kann, was sowohl präzise als auch effizient ist (der Browser wird automatisch alle Elemente zurücksetzen, die diesen Stil anwenden), und die Stileinstellungen wirklich ändern. Die neu hinzugefügten Elemente, die diesen Stil verwenden, wenden die geänderten Einstellungen automatisch an. Sie haben also übergeordnetes Wissen gelernt, das von vielen Menschen unterschieden wird. Lassen Sie mich die Methode unten im Detail erläutern:
Aufgrund des obigen Beispiels ist es nicht leicht, den Effekt zu erkennen. Ich habe unten ein weiteres Beispiel geschrieben. Es ist einfacher, den Effekt durch die Farbänderung zu erkennen:
<Styles> .vorver {width: 50px; Farbe: rot;}#Die vorver {width: 150px; color: silber;} </style> <div> Es sollte rot sein, aber es wird durch die folgenden Js gelb gelb werden, indem die CSS-Style-Einstellungen </div> <div id = "gelb"> hier geändert werden. In der Tat wird sich dies nicht ändern, nur zum Vergleich </div> <script> document.Stylesheets [0] .csSText = document.stylesheets [0] .csStext.Replace (/rot/g, "gelb"); // ist es nicht in Ordnung? </script>Das obige Beispiel richtet sich nicht auf einen bestimmten Stilnamen, sondern auf allgemeine Farben (wenn Sie es direkt in eine komplexere CSS-Seite mit roten Wörtern verschieben, die keine Farben angeben, kann dies auch zu Fehlern führen. Ich war immer extrem angewidert mit der Verwendung von Code, der nicht auf dem Gehirn basiert und nicht zu viele Anweisungen anliegt), aber es ist auch einfach, es in einen bestimmten Stilnamen zu ändern:
Aus dem obigen Punkt können wir dieses Dokument sehen. Wenn Sie also die Einstellungen für .ls ändern möchten, müssen Sie nur ".ls {width = 120px;}" als Ersatzteil zu ersetzen und ".ls {width = 555px;}" als Ersatzziel, und das ist in Ordnung.
Der obige Artikel über die dynamische Änderung von CSS -Stilblättern mit JavaScript ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.