Zusammenfassung der Methoden zum Ändern von CSS-Stilen in JavaScript_Javascript-Kenntnissen

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.

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

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

Ich persönlich empfehle die Verwendung der beiden letztgenannten Methoden. 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 ein Formular bringt.

1. Knotenstil (Inline-Stil) ändern

Diese Methode hat das höchste Gewicht. Sie wird direkt auf das Stilattribut des Knotens geschrieben. Sie überschreibt den von anderen Methoden festgelegten Stil. Die Anwendung ist ganz einfach:

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

Aber es sollte beachtet werden, dass einige CSS-Stilnamen aus mehreren Wörtern bestehen, wie z. B. Schriftgröße, Hintergrundbild usw. Sie sind alle mit Bindestrichen (-) verbunden. In JavaScript bedeuten Bindestriche jedoch „Minus“. " und kann daher nicht als Attributname verwendet werden. Wir müssen „camelCase“ verwenden, um Attributnamen wie „fontSize“ und „backgroundImage“ zu schreiben.

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 von Echtzeitstilen (in Bezug auf das Verhalten) von Elementen, die sich häufig ändern Die Attribute ändern sich beim Ziehen ständig. Mit dieser Methode können sie nicht im Handumdrehen geändert werden.

2. Klasse und ID ändern

id und class 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 des Anzeigestils von Elementen und der ID zu verwenden Wird häufig als JavaScript-Hook verwendet. Kann unnötige Fehler verursachen.

In JavaScript ist „class“ ein reserviertes Schlüsselwort. Verwenden Sie daher „className“ als Attribut für den Zugriff auf die Elementklasse, zum Beispiel:

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

Bedrückender ist jedoch, dass dieses Attribut eine Zeichenfolge ist, die alle Klassen des Elements enthält. Alle Klassen sind durch Leerzeichen getrennt, was das Löschen von Klassen sehr umständlich macht (fügen Sie sie einfach hinzu und stellen Sie einfach eine Zeichenfolgenverbindung zwischen ihnen her). , aber denken Sie daran, vorne ein Leerzeichen einzufügen~).

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 die Klasse am Anfang und am Ende zu löschen Fügen Sie jedem des className-Attributs ein Leerzeichen hinzu, und dann wird alles zur mittleren Methode und ersetzt direkt die Teilzeichenfolge:

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

Am besten verwenden Sie diese Methode für allgemeine Stiländerungen. JavaScript gibt nur Anweisungen für Stiländerungen aus.

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

3. Holen Sie sich den echten Stil

Das erste, was klargestellt werden muss, ist, dass element.style nicht verwendet werden kann. Es können nur Inline-Stile abgerufen werden, und die Definitionen im Stylesheet können 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 sie nur kapseln, um sie zu verwenden:

//获取元素样式
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;
}

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

4. Formulare anzeigen und ausblenden (CSS nicht missbrauchen)

Wir sehen häufig, dass einige Formularoptionen dynamisch hinzugefügt werden. Wenn Sie beispielsweise in einem Formular „Verheiratet“ als Familienstand auswählen, wird ein zusätzliches Eingabefeld angezeigt, in das Sie den Namen Ihres Ehepartners eingeben können.

Wenn es keine Wahl gibt, müssen Sie natürlich alle Formulare im Zusammenhang mit „Ehepartner“ ausblenden, aber Sie sollten zu diesem Zeitpunkt kein CSS verwenden, um das Problem zu lösen, d. h. Sie können style.display="none" nicht verwenden. um es zu verbergen.

Denn egal, ob Sie es ausblenden oder nicht, das Eingabefeld ist vorhanden und nimmt weder zu, noch verringert es sich Dieses Mal wird der Inhalt dieses versteckten Eingabefelds zusammen übermittelt und es können unerwartete Fehler auftreten ~

Der richtige Ansatz besteht darin, diesen Inhalt im DOM-Hyperraum zu platzieren, damit es nicht zu den oben genannten Problemen kommt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.