Partagez un exemple de modification dynamique de la couleur d'arrière-plan du corps de la page Web à l'aide de JS

Cet article présente principalement l'exemple de code JS modifiant dynamiquement la couleur d'arrière-plan du corps de la page Web. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

La couleur d'arrière-plan par défaut de la plupart des pages Web est le blanc, ce qui est personnellement flagrant, j'ai donc écrit un script JS pour changer la couleur d'arrière-plan de la partie du corps. Le code est le suivant :

// ==UserScript==
// @name    ChangeBackgroundColor
// @namespace  tingl
// @include   *
// @version   1
// @grant    none
// ==/UserScript==
(function () {
 'use strict';
 var color = '#ececec';
 var style;
 function createStyle() {
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = 'body {background-color: ' + color + ' !important;}';
 }
 function changeBackgroundColor() {
  if(!style.parentNode) document.head.appendChild(style);
 }
 createStyle();
 changeBackgroundColor();
 document.head.addEventListener("DOMNodeRemoved",changeBackgroundColor);
}) ()

Le code est relativement simple. Il crée directement une règle de style CSS sur le corps, puis l'ajoute à l'en-tête. Si le contenu de la page Web change ou si une mise à jour asynchrone entraîne la suppression du style, ce sera le cas. ré-ajouté à la tête via le mécanisme d'écoute des événements.

Comme il change simplement la couleur d'arrière-plan du corps, le script a un champ d'application limité.

Recommandations associées :

Comment utiliser jquery pour afficher la couleur d'arrière-plan lorsque vous cliquez sur un lien

Comment utiliser CSS3 couleur d'arrière-plan dégradé Compatible avec IE9+

Afficher la couleur d'arrière-plan de la page Web des effets spéciaux du code CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!