JS动态修改网页body的背景色实例代码

更新时间：2017年10月07日 09:35:07 作者：changshanfeilong

这篇文章主要介绍了JS动态修改网页body的背景色实例代码 ,需要的朋友可以参考下

大部分网页默认的背景色为白色，个人感觉比较刺眼，于是写了个JS的脚本去改变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);
}) ()

代码比较简单，直接创建了一个body上的css样式规则，然后添加到head里，如果网页内容变化或者异步更新等使样式被移除时，通过事件监听机制重新添加到head上。

由于只是简单地改变了body上的背景色，脚本的适用范围有限。

总结

以上所述是小编给大家介绍的JS动态修改网页body的背景色实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

JavaScript的事件监听你了解吗
这篇文章主要为大家详细介绍了JavaScript的事件监听，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
JS+CSS实现炫酷光感效果
这篇文章主要为大家详细介绍了JS+CSS实现炫酷光感效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
js怎么判断flash swf文件是否加载完毕
因为我一直不知道该怎么判断swf文件是否加载完毕，于是想用js来实现这个功能,需要的朋友可以参考下
2014-08-08
js根据给定的日期计算当月有多少天实现思路及代码
根据给定的日期计算当月有多少天,想必这样的功能大家都想实现吧，所以本文的出现相当有必要，接下来看下实现代码，感兴趣的朋友可以了解下，希望对你有所帮助
2013-02-02
JavaScript手写Promise核心原理
这篇文章主要介绍了JavaScript手写Promise核心原理，promise 可以说是出场率很高的api了，这篇文章手写一版promise,可以加强对promise的认识
2022-06-06
IE 上下滚动展示模仿Marquee机制
最近要做一个大屏幕展示上下滚动的列表，而IE自带的Marquee，无法满足需要，随自己写了一个滚动机制，代码在附件中
2009-12-12
Javascript 中的 call 和 apply使用介绍
JavaScript 中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
2012-02-02
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
在很多系统模块里面，我们可能都需要进行一定的数据交换处理，这样可以很好的达到用户操作体验感，接下来通过本文给大家介绍基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理相关知识，非常具有参考价值，感兴趣的朋友一起学习吧
2016-05-05
javascript计时器详解
这篇文章主要详细介绍了javascript计时器的相关资料,十分全面详尽，需要的朋友可以参考下
2015-02-02
JS定时器使用,定时定点,固定时刻,循环执行详解
下面小编就为大家带来一篇JS定时器使用,定时定点,固定时刻,循环执行详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05