Teilen Sie ein Beispiel für die dynamische Änderung der Hintergrundfarbe des Webseitenkörpers mithilfe von JS

In diesem Artikel wird hauptsächlich der Beispielcode für die dynamische Änderung der Hintergrundfarbe des Webseitenkörpers vorgestellt. Freunde, die ihn benötigen, können darauf verweisen.

Die Standardhintergrundfarbe der meisten Webseiten ist Weiß, was mir persönlich auffällt. Deshalb habe ich ein JS-Skript geschrieben, um die Hintergrundfarbe des Textteils zu ändern:

// ==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);
}) ()

Der Code ist relativ einfach. Er erstellt direkt eine CSS-Stilregel im Hauptteil und fügt sie dann dem Kopf hinzu. Wenn sich der Inhalt der Webseite ändert oder eine asynchrone Aktualisierung dazu führt, dass der Stil entfernt wird über den Event-Listening-Mechanismus erneut zum Kopf hinzugefügt.

Da es lediglich die Hintergrundfarbe des Textes ändert, ist der Anwendungsbereich des Skripts begrenzt.

Verwandte Empfehlungen:

So verwenden Sie JQuery, um die Hintergrundfarbe anzuzeigen, wenn Sie auf einen Link klicken

So verwenden Sie CSS3 Hintergrundfarbe mit Farbverlauf Kompatibel mit IE9+

Hintergrundfarbe anzeigen CSS-Code für Webseiten-Spezialeffekte

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die dynamische Änderung der Hintergrundfarbe des Webseitenkörpers mithilfe von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!