1. Ändern Sie den Stil teilweise
Es gibt drei Arten: Ändern des direkten Stils, Ändern des Klassennamens und Ändern des CSS-Texts. Zu beachten sind:
Achten Sie auf die Großschreibung:
In JavaScript wird die Groß-/Kleinschreibung stark beachtet. ClassName kann „N“ nicht als „n“ schreiben und cssText kann „T“ nicht als „t“ schreiben, da sonst der Effekt nicht erzielt werden kann.
Aufrufmethode:
Wenn Sie den Klassennamen ändern, deklarieren Sie die Klasse im Voraus im Stylesheet, folgen Sie jedoch beim Aufruf nicht dem Stil. Schreiben wie document.getElementById('obj').style.className="..." ist falsch! Es kann nur geschrieben werden als: document.getElementById('obj').className="…"
CSSText ändern
Wenn Sie jedoch cssText verwenden, müssen Sie einen Stil hinzufügen. Die richtige Schreibweise lautet: document.getElementById('obj').style.cssText=“…“
Ich muss nicht über die Änderung des direkten Stils sprechen. Denken Sie nur daran, den spezifischen Stil aufzuschreiben, z
Kopieren Sie den Codecode wie folgt:
document.getElementById('obj').style.backgroundColor=“#003366“
2. Ändern Sie den Stil global
Normalerweise können wir den Webseitenstil in Echtzeit ändern, indem wir den href-Wert des externen Linkstils ändern, dh „den Vorlagenstil ändern“. Zu diesem Zeitpunkt müssen wir dem Ziel, das geändert werden muss, zunächst eine ID zuweisen, z
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
Es ist sehr einfach anzurufen, z
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Klicken Sie auf mich, um den Stil zu ändern</span>
Neulinge wissen oft nicht, wie man bestimmte CSS-Stile in JavaScript schreibt, und manchmal sind die Anforderungen in verschiedenen Browsern unterschiedlich. Beispielsweise wird float im IE als styleFloat und in FIREFOX als cssFloat geschrieben, was die Ansammlung aller erfordert. Die Suche nach „ccvita javascript“ in Google kann Ihre Zweifel zerstreuen.
Grundkenntnisse
Normalerweise gibt es drei Möglichkeiten, Stylesheets in Webseiten aufzurufen.
Der erste: Verlinkung zu einer externen Stylesheet-Datei (Linking to a Style Sheet)
Sie können zunächst eine externe Stylesheet-Datei (.css) erstellen und dann das HTML-Link-Objekt verwenden. Beispiele sind wie folgt:
Kopieren Sie den Codecode wie folgt:
<Kopf>
<title>Dokumenttitel</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
In XML würden Sie es im Deklarationsbereich hinzufügen, wie im folgenden Beispiel gezeigt:
Kopieren Sie den Codecode wie folgt:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Zweiter Typ: Internes Stilblockobjekt definieren (Einbetten eines Stilblocks)
Sie können eine einfügen
Blockobjekt. Informationen zu Definitionsmethoden finden Sie in der Stylesheet-Syntax. Beispiele sind wie folgt:
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<title>Dokumenttitel</title>
<style type="text/css">
<!--
Körper {Schriftart: 10pt „Arial“}
h1 {Schriftart: 15pt/17pt „Arial“; Schriftstärke: Fettfarbe: Kastanienbraun}
h2 {Schriftart: 13pt/15pt „Arial“; Schriftstärke: fett; Farbe: blau;
p {Schriftart: 10pt/12pt „Arial“; Farbe: Schwarz}
->
</style>
</head>
<Körper>
</body></html>
Bitte beachten Sie, dass die Einstellung des Typattributs des Stilobjekts auf „text/css“ es Browsern, die diesen Typ nicht unterstützen, ermöglicht, das Stylesheet zu ignorieren.
Der dritte Typ: Inline-Definition (Inline-Stile)
Bei der Inline-Definition wird das Stilattribut des Objekts im Markup des Objekts verwendet, um die darauf anwendbaren Stylesheet-Attribute zu definieren. Beispiele sind wie folgt:
Kopieren Sie den Codecode wie folgt:
<p style="margin-left: 0.5in; margin-right:0.5in">Diese Zeile hat linke und rechte äußere Patches hinzugefügt</p><p> </p>