Wie kann ich CSS-Stile auf einer Webseite dynamisch ändern, ohne sie neu laden zu müssen?

CSS-Stile im Handumdrehen austauschen

Sie möchten den CSS-Stil einer Webseite dynamisch ändern und dabei ein Stylesheet durch ein anderes ersetzen. In Vanilla JavaScript oder jQuery können Sie dies erreichen, indem Sie alle erforderlichen Stylesheets einbinden und diese dann selektiv aktivieren oder deaktivieren.

Option 1: Toggle rel=alternate

Stylesheets einbeziehen mit „rel=alternate“ und schalten Sie ihren Status um:

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

Option 2: Deaktivieren und umschalten

Stylesheets mit „rel=stylesheet“ einschließen und „class=alternate“ und schalten Sie deren „disabled“-Eigenschaft um:

<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;
}</code>

Option 3: Toggle media=none

Stylesheets einschließen mit „ media=none“ und schalten Sie ihr „media“-Attribut um:

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

Wählen Sie einen Stylesheet-Knoten mit getElementById, querySelector oder anderen Methoden aus. Verwenden Sie bei Bedarf jQuery für die weitere Verarbeitung. Mit diesem Ansatz können Sie CSS-Stile im Handumdrehen wechseln, ohne die Seite neu laden zu müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Stile auf einer Webseite dynamisch ändern, ohne sie neu laden zu müssen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!