JS动态修改网页Body背景色的脚本实现

作者：代码拾荒

时间：2026-10-22

本文介绍一种通过JavaScript脚本动态修改网页body背景色的方法。该脚本利用Tampermonkey等工具注入CSS样式规则，并通过监听DOM节点移除事件确保样式持久生效，适用于解决默认白色背景刺眼的问题，但适用范围相对有限。

文章目录

JS动态修改网页Body背景色的脚本实现

大多数网页默认采用白色背景，这种设计往往显得较为刺眼。为改善视觉体验，可以编写一段JavaScript脚本来动态调整body元素的背景色，具体实现代码如下：


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

该脚本的核心逻辑较为简单，主要是在页面head中动态创建并插入一条针对body的CSS样式规则。此外，为了应对网页内容更新或异步加载导致样式被意外移除的情况，脚本还注册了事件监听器，一旦检测到相关DOM变化，便会重新将样式规则添加至head中，确保持久生效。

需要注意的是，由于该脚本仅针对body元素的背景色进行简单修改，其功能较为单一，因此适用场景相对有限。

总结

上述内容介绍了利用JavaScript动态修改网页body背景色的具体实例代码，希望能对读者有所帮助。如果在使用过程中遇到任何疑问，欢迎留言讨论，作者会及时回复。