Detaillierte Erläuterung der CSS_Javascript-Kenntnisse für den dynamischen Betrieb von Javascript

1. So verwenden Sie js, um CSS-Attribute zu bedienen

1. Für CSS-Attribute ohne Bindestrich verwenden Sie im Allgemeinen direkt den Stilattributnamen.

Wie zum Beispiel: obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. Entfernen Sie bei CSS-Attributen, die Unterstriche enthalten, jeden Unterstrich und ersetzen Sie das erste Zeichen nach jedem Unterstrich durch Großbuchstaben.

Wie zum Beispiel: obj.style.marginTop, obj.style.borderLeftWidth, obj.style.zIndex, obj.style.fontFamily usw.

3. Spezielle Schreibmethode für JS zur Bedienung des CSS-Float-Attributs

Da float ein reserviertes Wort von JavaScript ist, können wir obj.style.float nicht direkt verwenden, da dieser Vorgang ungültig ist. Die korrekte Verwendungsmethode ist: IE: obj.style.styleFloat, andere Browser wie Mozilla (Gecko), ff usw. verwenden styleFloat: obj.style.cssFloat.

2. Verwenden Sie js, um CSS-Attributwerte zu erhalten

1. Holen Sie sich den Inline-Stil: obj.style-Attributname.

JS erhält CSS-Attributwert

Auf die Klasse kann nicht zugegriffen werden.

2. Holen Sie sich die CSS-Attribute innerhalb der Klasse und außerhalb des Links: IE verwendet die Methode obj.currentStyle["property name"], während FF die Methode getComputedStyle verwendet

3. Verwenden Sie js, um CSS-Attributen Werte zuzuweisen

1. Klassenattribut zuweisen

Aufgabe: document.getElementById('ceil').className = "class1";

Wenn es mehrere Werte hat: document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText legt den CSS-Stil eines Objekts fest

document.getElementById('navition').style.cssText = "Ihr CSS-Code';

Zusammenfassung

Zu wissen, wie man die auf eine Seite angewendeten Stile dynamisch ändert, ist für die Erstellung stilvoller und interaktiver Webseiten äußerst nützlich – das in diesem Artikel erläuterte Wissen bildet die Grundlage für fortgeschrittenere Techniken wie JavaScript-Animationen. Es ist wichtig zu beachten, dass Sie mit dynamischen Stiländerungen verantwortungsbewusst umgehen und sie nicht überbeanspruchen sollten. Wie bereits erwähnt, können Stiländerungen auch die Webeffizienz verbessern – das Ein- und Ausblenden von Inhalten kann dazu beitragen, unnötige Dateninteraktionen zwischen Client und Server zu vermeiden.