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.

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:

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.

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.

.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:

//删除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~

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.

Tatsächlich stellen sowohl Microsoft als auch W3C entsprechende Methoden bereit. Wir müssen es nur kapseln, bevor wir es 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;
}

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!