Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der JavaScript-Änderung des lokalen und globalen CSS-Stilcodes

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

伊谢尔伦Original: 2017-07-19 16:32:582581Durchsuche

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″

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" />

. Der Aufruf ist sehr einfach, z. B.

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

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>

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

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

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für zwei Methoden der Kartenfunktion in jQueryNächster Artikel：Beispielcode für zwei Methoden der Kartenfunktion in jQuery

In Verbindung stehende Artikel

Mehr sehen