Das Ändern des CSS-Stils ist in manchen Fällen sehr praktisch. Sie können einige Stile dynamisch ändern.
1. Es gibt drei Typen: Direktstil ändern, Klassenname ändern und CSSText ändern. Was zu beachten ist:
Achten Sie auf die Großschreibung:
Javascript reagiert sehr empfindlich auf Groß- und Kleinschreibung. ClassName kann „N“ nicht als „n“ schreiben und cssText kann „T“ nicht als „t“ schreiben Wirkung nicht umsetzbar.
Aufrufmethode:
Wenn Sie den Klassennamen ändern, deklarieren Sie die Klasse im Voraus im Stylesheet, folgen Sie beim Aufruf jedoch nicht dem Stil, z. B. document.getElementById('obj').style.className=“…“ Falsch ! Es kann nur geschrieben werden als: document.getElementById('obj').className="..."
Change cssText
Aber wenn Sie cssText verwenden, müssen Sie einen Stil hinzufügen. Die richtige Schreibweise ist: document.getElementById('obj') .style.cssText=“…“
Ich muss nicht über das Ändern des direkten Stils sprechen, z. B.
document.getElementById('obj').style.backgroundColor=”#003366″
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 zu ändernden Ziel zunächst eine ID geben, z. B.
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
Grundkenntnisse
Es gibt normalerweise drei Methoden zum Aufrufen von Stylesheets in Webseiten.
Erste Methode: Verknüpfen mit einer externen Stylesheet-Datei (Verknüpfen mit einem Stylesheet)
Sie können zuerst eine externe Stylesheet-Datei (.css) erstellen und dann das HTML-Linkobjekt verwenden. Ein Beispiel lautet wie folgt:
<head> <title>文档标题</title> <link rel=stylesheet href="http://demo.css" type="text/css"> </link></head>
< ? xml-stylesheet type="text/css" href="http://dhtmlet.css" ?>
Sie können ein
-Blockobjekt zwischen den Tags und in Ihrem HTML-Dokument einfügen. Informationen zu Definitionsmethoden finden Sie in der Stylesheet-Syntax. Ein Beispiel lautet wie folgt:
<html> <head> <title>文档标题</title> <style type="text/css"> <!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} --> </style> </head> <body> </body></html>
Der dritte Typ: Inline-Definition (Inline-Stile)
Inline-Definition besteht darin, das Stilattribut des Objekts innerhalb des Objekt-Tags zu verwenden, um die darauf anwendbaren Stylesheet-Attribute zu definieren. Ein Beispiel lautet wie folgt:
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Änderung des lokalen und globalen CSS-Stilcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!