Einfache Implementierung des Hinzufügens mehrerer Klassen zu Elementen durch JavaScript
<html> <kopf> <style type = "text/css"> .div2 {font-size: 16px; Farbe: Orange; } .div3 {Schriftgröße: 20px; Farbe: Blau; } <Styles> <script type = "text/javaScript"> [1] Weisen Sie den Stil direkt dem ClassName var odiv = document.getElementById ('Div1') zu; ODIV.CLASSNAME = DIV3 // Auf diese Weise erhalten wir Class = "Div3" und überschreiben direkt den Div2 -Stil. [2] Verwenden Sie die Akkumulation, um den Wert ClassName var odiv = document.getElementById ('Div1') zuzuweisen; odiv.className+= ""+div3 // Es gibt eine Lücke zwischen dem Stil und dem Stil. Fügen Sie also eine leere Zeichenfolge hinzu, um sie zu trennen // Dies kann normal hinzugefügt werden. Wenn wir den Stil hinzufügen, müssen wir jedoch überlegen, ob es zuvor den gleichen Stil hat. Wenn wir es hinzufügen, wird es eine Belastung, zum Beispiel Class = "Div2 Div3 Div3"; [3] Überprüfen Sie, ob der Stil den gleichen Stil vor var odiv = document.getElementById ('Div1') hat; Funktion hasClass (Element, csName) {element.className.match (regexp ('(// s |^)'+csname+'(// s | $)')); // Verwenden Sie regelmäßige Erkennung, um festzustellen, ob es den gleichen Stil gibt} [4] basierend auf [3], wir können den Stil nach dem Element beurteilen. var odiv = document.getElementById ('div1'); Funktion hasClass (Element, csName) {returnelement.className.match (regexp ('(// s |^)'+csname+'(// s | $)')); // Verwenden Sie die reguläre Erkennung, um festzustellen, ob es denselben Stil} -Funktion addClass (Element, csName) {if (! Hasclass (Element, csName)) {element.className+= ''+csName; } addClass (odiv, 'div3'); // Auf diese Weise können Sie dem Element flexibel Stile hinzufügen. [Element löschen angegebener Stil] // Gleiches gilt zuerst, und löschen Sie var odiv = document.getElementById ('div1'); Funktion hasClass (Element, csName) {returnelement.className.match (regexp ('(// s |^)'+csname+'(// s | $)')); // Verwenden Sie die reguläre Erkennung, um festzustellen, ob es denselben Stil} -Funktion gibt (Element, csName) {if (! Hasclass (Element, csName)) {element.className.Replace (Regexp ('(// S |^)'+csname+'(// s | $)'), ''); // Verwenden Sie den regulären, um den Namen des zu löschenden Stils zu erfassen, und ersetzen Sie ihn dann durch eine leere Zeichenfolge, die dem Löschen entspricht} DeleteClass (Odiv, Div3). } </script> </head> <body> <div id = "div1" class = 'div2'> test </div> </body> </html>Die einfache Implementierung des Hinzufügens mehrerer Klassen zu Elementen in JavaScript ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.