Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der lokalen JavaScript-Änderung und der globalen Änderung von CSS-Stilbeispielen

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

伊谢尔伦Original: 2017-07-21 14:59:342140Durchsuche

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″

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

. 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 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>

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

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>

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>

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!

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：Ausführliche Erläuterung von Anwendungsbeispielen für asynchrone und synchrone $.getJSON-AnfragenNächster Artikel：Ausführliche Erläuterung von Anwendungsbeispielen für asynchrone und synchrone $.getJSON-Anfragen

In Verbindung stehende Artikel

Mehr sehen