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

2019-11-19 15:13:27

字体：大中小

来源：转载

供稿：网友

大部分网页默认的背景色为白色，个人感觉比较刺眼，于是写了个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的背景色实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：MUI顶部选项卡的用法(tab-top-webview-main)详解

下一篇：JS实现简单表格排序操作示例