web-dev-qa-db-fra.com

Comment définir la couleur de fond du corps avec JS avant le chargement complet de la page?

J'utilise ce script pour permettre à l'utilisateur de changer la couleur de fond ...

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>

Cela fonctionne, mais le problème est qu’il affiche la couleur sélectionnée après le chargement complet de la page. Je veux montrer la couleur que l'utilisateur sélectionne avant la page est chargée.

Exemple: la couleur d'arrière-plan est blanche et l'utilisateur sélectionne le rouge. Le script affiche une couleur d'arrière-plan blanche avant la sélection et, une fois que l'utilisateur a sélectionné le rouge, il modifie la couleur d'arrière-plan en rouge. Comment puis-je faire ceci?

C’est exactement ce que j’essaie de faire avec Javascript, exemple CSS

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

Tout d’abord, vous pouvez simplifier votre logique de réglage de la couleur comme ci-dessous:

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

Il vous suffit de modifier la couleur si quelque chose est stocké localement, sinon la couleur par défaut spécifiée dans le CSS sera utilisée automatiquement.

Pour obtenir un changement rapide, vous pouvez supprimer tout événement et placer votre script dans la balise head. Au lieu de cibler l'élément body, vous pouvez cibler celui html et vous obtiendrez le même résultat en raison de propagation en arrière-plan : 

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

L'extrait change le test de code localement pour des résultats plus précis.

10
Temani Afif

Vous devez utiliser un autre événement onreadystatechange. Celui-ci se déclenche avant la onload. J'ai joué un peu avec les fonctions et réglé "orange" comme valeur par défaut pour cet événement et un autre comme "OFF" pour les boutons car j'ai désactivé les cookies qui n'étaient pas dans votre code. Remarque; si vous voulez, aussi vite que le script le permet, faites-le. (rouge) en appel (vert) en exécution automatique.

J'ai ajouté un console.log afin que vous puissiez voir que les couleurs changent du rouge au orange en passant au bleu en fonction des événements (se produit rapidement, voir les temps de journalisation)

(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
Mark Schultheiss

Ne négligez pas l’impressionnant pouvoir du langage Javascript traditionnel: utilisez document.write efficacement aux bons endroits, par exemple à la fin de la balise 'head'.

<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

Puisque le CSS en ligne est traité AVANT le traitement de javascript, avez-vous essayé de simplement supprimer la couleur de fond du CSS en ligne?

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

Au lieu de placer votre fonction de changement de couleur de fond sur window.onload, essayez de la placer dans une balise <script> juste après la balise <body> d'ouverture:

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