Detaillierte Erläuterung der JavaScript-Änderung des lokalen und globalen CSS-Stilcodes-js-Tutorial-php.cn

Detaillierte Erläuterung der JavaScript-Änderung des lokalen und globalen CSS-Stilcodes

伊谢尔伦

Freigeben： 2017-07-19 16:32:58

Original

2599 Leute haben es durchsucht

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(&#39;obj&#39;).style.backgroundColor=”#003366″

Nach dem Login kopieren

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 zu ändernden Ziel zunächst eine ID geben, z. B.

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

Nach dem Login kopieren

. Der Aufruf ist sehr einfach, z. B.

<span on click="javascript:document.getElementById(&#39;css&#39;).href = &#39;ie.css&#39;">点我改变样式</span>

Nach dem Login kopieren

Neulinge wissen oft nicht, wie man bestimmte 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. Dies erfordert die Akkumulation aller. Die Suche nach „ccvita javascript“ in Google kann Ihre Zweifel zerstreuen.

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>

Nach dem Login kopieren

In XML sollten Sie es im Deklarationsbereich hinzufügen, wie im folgenden Beispiel gezeigt:

< ? xml-stylesheet type="text/css" href="http://dhtmlet.css" ?>

Nach dem Login kopieren

Zweitens: Definieren Sie ein internes Stilblockobjekt (Einbetten eines Stilblocks)

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>

Nach dem Login kopieren

Bitte beachten Sie, dass die Einstellung des Typattributs des Stilobjekts hier auf „text/css“ es Browsern, die diesen Typ nicht unterstützen, ermöglicht, das Stylesheet zu ignorieren.

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>

Nach dem Login kopieren

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!