Wie tausche ich CSS-Dateien dynamisch aus, ohne die Seite neu zu laden?

Dynamischer CSS-Dateiaustausch zur Änderung des Seitenstils

Problem:

Sie haben eine Webseite mit einer statischen CSS-Datei (light.css) im Header verlinkt. Sie benötigen einen nahtlosen Mechanismus, um den Stil der Seite auf eine andere CSS-Datei (dark.css) umzustellen und vorhandene Stile zu ersetzen.

Lösung:

Um CSS-Dateien dynamisch und auszutauschen Um den neuen Stil anzuwenden, ohne die Seite neu zu laden, können Sie einen der folgenden Ansätze verwenden:

1. Attribut „rel=alternate“ umschalten:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"></code>

<code class="javascript">function enableStylesheet(node) {
  node.rel = 'stylesheet';
}

function disableStylesheet(node) {
  node.rel = 'alternate stylesheet';
}</code>

2. Eigenschaft „deaktiviert“ festlegen und umschalten:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate"></code>

<code class="javascript">function enableStylesheet(node) {
  node.disabled = false;
}

function disableStylesheet(node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>

3. Attribut „media=none“ umschalten:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark"></code>

<code class="javascript">function enableStylesheet(node) {
  node.media = '';
}

function disableStylesheet(node) {
  node.media = 'none';
}</code>

Hinweis:

• Mit getElementById, querySelector können Sie auf bestimmte CSS-Dateien abzielen , oder andere Selektoren.
• Vermeiden Sie das nicht standardmäßige Attribut „Link deaktiviert“. Das Setzen von HTMLLinkElement#disabled ist weiterhin akzeptabel.
• Diese Methoden ermöglichen einen reibungslosen Stilwechsel, ohne dass Seitenelemente beeinträchtigt werden, die möglicherweise von JavaScript dynamisch gestaltet werden.

Das obige ist der detaillierte Inhalt vonWie tausche ich CSS-Dateien dynamisch aus, ohne die Seite neu zu laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!