Zusammenfassung der Stilmethoden zum Ändern von CSS-Attributen wie Stil, ID, Klasse usw. in JavaScript

Mit JavaScript können Sie CSS-Stile im Handumdrehen ändern, sodass Sie die Aufmerksamkeit des Benutzers auf die Stelle lenken können, auf die er sich konzentrieren soll, und ein besseres interaktives Erlebnis bieten können.

Es gibt 4 Möglichkeiten, CSS in JavaScript zu ändern:

Knotenstil ändern (Inline-Stil);
Neues CSS schreiben; 🎜>Ersetzen Sie das Stylesheet auf der Seite.

Fast alle Funktionen können mit den ersten beiden Methoden erreicht werden, und der Code ist klarer und leichter zu verstehen.

Ich werde später auch darüber sprechen, wie man den tatsächlichen Stil des Elements und die Vorsichtsmaßnahmen in eine Form bringt.

1. Knotenstil ändern (Inline-Stil)

Diese Methode hat das höchste Gewicht und wird direkt in das Stilattribut des Knotens geschrieben andere Methoden. Der Stilsatz. Die Verwendung ist sehr einfach:

Allerdings ist zu beachten, dass einige CSS-Stilnamen aus mehreren Wörtern bestehen, wie z. B. Schriftgröße, Hintergrundbild usw., und alle miteinander verbunden sind mit Bindestrichen (-). Bindestrich bedeutet in JavaScript jedoch „Minus“ und kann daher nicht als Attributname verwendet werden. Wir müssen „camelCase“ verwenden, um Attributnamen wie „fontSize“ und „backgroundImage“ zu schreiben.

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

Beachten Sie außerdem, dass viele Stile Einheiten haben und nicht nur eine Zahl angegeben werden können. Zu den Einheiten von „fontSize“ gehören beispielsweise px, em, % (Prozentsatz) usw.

Diese Methode verstößt gegen das Prinzip der Trennung von Leistung und Verhalten. Sie eignet sich im Allgemeinen nur zum Definieren unmittelbarer Stile (in Bezug auf das Verhalten) von Elementen, die sich häufig ändern Wird gezogen, ändern sich die Attribute „oben“ und „links“ derzeit nicht durch eine Klasse oder andere Methoden. Mit dieser Methode kann der Stil sofort geändert und andere Einstellungen überschrieben werden.

2. Klasse und ID ändern

ID und Klasse sind „Hooks“ zum Festlegen von Stilen. Nach Änderungen aktualisiert der Browser automatisch den Stil des Elements.

Die Methode zum Ändern der ID ähnelt der von class, ich persönlich empfehle jedoch nicht, sie auf diese Weise zu verwenden, da die ID zum Auffinden von Elementen verwendet wird. Es ist am besten, sie nicht zum Definieren der Anzeige zu verwenden Der Stil der Elemente und die ID werden auch häufig als JavaScript-Hook verwendet, da dies zu unnötigen Fehlern führen kann.

In JavaScript ist class ein reserviertes Schlüsselwort, daher wird className als Attribut für den Zugriff auf die Klasse des Elements verwendet, zum Beispiel:

Aber was noch deprimierender ist, ist, dass dieses Attribut ein Attribut ist, das Enthält alle Klassen des Elements. Alle Klassen sind durch Leerzeichen getrennt, was das Löschen von Klassen umständlich macht (fügen Sie einfach hinzu, stellen Sie einfach eine Zeichenfolgenverbindung zwischen ihnen her, aber denken Sie daran, vor ~ ein Leerzeichen einzufügen).

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

Ich habe beim Löschen reguläre Ausdrücke verwendet und die Klasse entsprechend ihren verschiedenen Positionen in der Zeichenfolge (Kopf, Ende, Mitte) gelöscht, aber dann habe ich mir eine bessere Möglichkeit überlegt, nämlich sie in className Add zu löschen Geben Sie am Anfang und am Ende des Attributs ein Leerzeichen ein, dann wird alles zur mittleren Methode und ersetzt direkt den Teilstring:

Verwenden Sie diese Methode am besten für allgemeine Stiländerungen und definieren Sie CSS Bei Stilen gibt JavaScript nur Anweisungen für Stiländerungen aus und die spezifische Stildefinition wird CSS überlassen.

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

Die letzten beiden Methoden sind weder elegant noch weisen sie bestimmte Kompatibilitätsprobleme auf, daher werde ich sie nicht vorstellen~

3 Holen Sie sich den echten Stil

Als Erstes muss klargestellt werden, dass element.style nicht verwendet werden kann. Es können nur Inline-Stile abgerufen werden, die Definitionen im Stylesheet können jedoch nicht abgerufen werden.

Da der Stil eines Elements an so vielen Stellen definiert werden kann, ist es schwer zu sagen, wie sein tatsächlicher Stil aussieht. Gibt es eine Möglichkeit, den tatsächlichen Stil des Elements im Browser anzuzeigen?

Tatsächlich stellen sowohl Microsoft als auch W3C entsprechende Methoden bereit. Wir müssen es nur kapseln, bevor wir es verwenden:

Denken Sie daran, dass der übergebene styleName im „Kamel-Case-Format“ vorliegt~~

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

4. Formulare anzeigen und ausblenden (CSS nicht missbrauchen)

Wir sehen häufig, dass einige Formularoptionen dynamisch hinzugefügt werden, beispielsweise wenn Sie in einem Formular die Option „Heirat“ auswählen Wenn der Status „verheiratet“ lautet, gibt es ein zusätzliches Eingabefeld, in das Sie den Namen Ihres Ehepartners eingeben können.

Wenn Sie keine Wahl haben, müssen Sie natürlich alle Formulare im Zusammenhang mit „Ehepartner“ ausblenden, aber zu diesem Zeitpunkt sollten Sie kein CSS zur Lösung verwenden, das heißt, Sie können keinen Stil verwenden. display="none", um es auszublenden.

Denn egal, ob Sie es verbergen oder nicht, das Eingabefeld ist da und nimmt weder zu, noch verringert es sich ~ [Halo] Um es ganz klar auszudrücken: Auch wenn es ausgeblendet ist, existiert es immer noch im DOM. Wenn der Benutzer das Formular zu diesem Zeitpunkt abschickt, wird der Inhalt dieses versteckten Eingabefelds zusammen übermittelt und es können unerwartete Fehler auftreten~

Der richtige Ansatz besteht darin, diesen Inhalt in den DOM-Hyperraum zu stellen , sodass das obige Problem nicht auftritt.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Stilmethoden zum Ändern von CSS-Attributen wie Stil, ID, Klasse usw. in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!