webentwicklung-frage-antwort-db.com.de

Wie kann man die Hintergrundfarbe des Körpers mit JS einstellen, bevor die Seite vollständig geladen wird?

Ich verwende dieses Skript, damit der Benutzer die Hintergrundfarbe ändern kann ...

document.onclick = function SetFavColor(e) {
    if (e.target.className == 'AvcGbtn') {
        var favColor = e.target.style.backgroundColor;

        localStorage.setItem('color', favColor);
        document.body.style.backgroundColor = favColor;
        console.log(favColor);
    }
};

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var favColor = document.body.style.backgroundColor;
    var color = localStorage.getItem('color');

    if (color === '') {
        document.body.style.backgroundColor = favColor;
    } else {
      document.body.style.backgroundColor = color;
    }
});

CSS:

body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}

HTML:

<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>      
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span> 

Das funktioniert, aber das Problem ist, dass die ausgewählte Farbe angezeigt wird, nachdem die Seite vollständig geladen wurde. Ich möchte die Farbe anzeigen, die der Benutzer wählt, bevor die Seite geladen wird.

Beispiel: Die Hintergrundfarbe ist weiß und der Benutzer wählt Rot aus. Das Skript zeigt vor der Auswahl eine weiße Hintergrundfarbe. Nachdem der Benutzer Rot ausgewählt hat, ändert das Skript die Hintergrundfarbe in Rot. Wie kann ich das machen?

Genau das versuche ich mit Javascript, zum Beispiel CSS

body:before {
background-color: red;
}
11
Leo

Zuerst können Sie Ihre Logik zum Einstellen der Farbe wie folgt vereinfachen:

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var color = localStorage.getItem('color');
    if (color != '') {
        document.body.style.backgroundColor = color;
    }
});

Sie müssen die Farbe nur ändern, wenn etwas lokal gespeichert ist. Andernfalls wird automatisch die im CSS festgelegte Standardfarbe verwendet.

Um eine schnelle Änderung zu erreichen, können Sie jedes Ereignis entfernen und Ihr Skript in das Tag head einfügen. Anstatt auf das Element body zu zielen, können Sie auf das Element html zielen und Sie werden das gleiche Ergebnis haben aufgrund Hintergrundausbreitung :

<!DOCTYPE html>
<html>
<head>
  <!-- coloration -->
  <style>html {background:red} /*default color*/</style>
  <script>
    var color ="blue" /*localStorage.getItem('color')*/;
    if (color != '') {
      document.documentElement.style.backgroundColor = color;
    }
  </script>
  <!-- -->
</head>
<body>

</body>
</html>

Das Snippet ändert den Code. Sie müssen es vor Ort testen, um genauere Ergebnisse zu erhalten.

11
Temani Afif

Sie müssen ein anderes Ereignis onreadystatechange verwenden. Dieser feuert vor der onload. Ich habe ein bisschen mit den Funktionen herumgespielt und 'Orange' als Standard für dieses Ereignis und ein anderes beim Klicken auf die Schaltflächen festgelegt, da ich die Cookie-Inhalte deaktiviert habe, die nicht in Ihrem Code enthalten waren. Hinweis; Wenn Sie möchten, dass das Skript so schnell ausgeführt werden kann, tun Sie das. (rot) als Anruf (grün) als selbstausführend.

Ich habe einen console.log hinzugefügt, damit Sie sehen können, dass die Farben aufgrund von Ereignissen von Rot zu Orange zu Blau wechseln (geschieht schnell, siehe Protokollzeiten).

(window.getColor=function (c) {
  var favColor = document.body.style.backgroundColor;
  var color = !!c ? c : "#FFFAFF"; //getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
  console.log(color);
})('green');

function setColor(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    //setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  } else {
    getColor("#DAFFFA");
  }
}
document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    //dom is ready, window.onload fires later
    getColor("orange");
  }
};
document.onclick = setColor;

window.onload = function() {
  getColor('blue');
};
getColor('red');
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>

<span class="AvcGbtn" style="background: #e8e8e8; background-size: 100% 100%;" rel="nofollow"></span>

4

Lassen Sie sich nicht von der gewaltigen Leistung von Oldschool Javascript abtun: Verwenden Sie document.write effektiv an den richtigen Stellen, wie beispielsweise am Ende des Head-Tags.

<head>
    <link rel="stylesheet" type="text/css" href="..."/>
    <script type="text/javascript">
    (function(){
      var color = localStorage.getItem('color');
      if(typeof(color) === "string" && color != "") {
         document.write("<style type=\"text\/css\">body{background-color:" + color + ";}</style>");
      }
    }());
    </script>
</head>
3
cjriii

Haben Sie vor der Verarbeitung von Javascript versucht, die Hintergrundfarbe einfach aus dem Inline-CSS zu entfernen?

document.onclick = function(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  }
};

window.onload = function() {
  var favColor = document.body.style.backgroundColor;
  var color = getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
};
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>

0
imvain2

Anstatt die Funktion zum Ändern der Hintergrundfarbe auf window.onload zu setzen, versuchen Sie, sie nach dem <script>-Tag in ein <body>-Tag zu setzen:

<html>
  ...
  <body>
    <script>
      // This js code will be executed before the rest of the page is loaded
    </script>
    ...
  </body>
</html>
0
Errorname