JS动态修改网页Body背景色的脚本实现
作者:代码拾荒时间:2026-10-22 09:04:30浏览:101
本文介绍一种通过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背景色的具体实例代码,希望能对读者有所帮助。如果在使用过程中遇到任何疑问,欢迎留言讨论,作者会及时回复。
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
