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

Detaillierte Erläuterung der lokalen JavaScript-Änderung und der globalen Änderung von CSS-Stilbeispielen

伊谢尔伦

Freigeben： 2017-07-21 14:59:34

Original

2127 Leute haben es durchsucht

1. Teilweise Änderung des Stils

Es gibt drei Arten: Änderung des direkten Stils, Änderung des Klassennamens und Änderung des CSS-Texts. 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, denken Sie nur daran, den spezifischen Stil aufzuschreiben, z. B.

document.getElementById(&#39;obj&#39;).style.backgroundColor=”#003366″

Nach dem Login kopieren

2 , Stil global ändern
Normalerweise können wir den Webseitenstil in Echtzeit ändern, indem wir den href-Wert des externen Linkstils ändern, d Vorlagenstil". Zu diesem Zeitpunkt müssen wir zunächst dem Ziel, das geändert werden muss, 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 CSS 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 Möglichkeiten, Stylesheets in Webseiten aufzurufen.
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://www.ccvita.com/demo.css" type="text/css"> 
</link></head>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Zweitens : Internes Stilblockobjekt definieren (Einbetten eines Stilblocks)
Sie können ein Blockobjekt zwischen dem Markup und dem 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 das Festlegen 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)

Inline-Definition besteht darin, das Stilattribut des Objekts im Markup des Objekts 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 lokalen JavaScript-Änderung und der globalen Änderung von CSS-Stilbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!