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


Posted in Javascript onOctober 07, 2017

大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery插件的写法分享
Jun 12 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
javascript函数式编程基础
Sep 15 Javascript
JS实现简单表格排序操作示例
Oct 07 #Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 #Javascript
node.js中http模块和url模块的简单介绍
Oct 06 #Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 #Javascript
vue-cli构建项目使用 less的方法
Oct 04 #Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 #Javascript
You might like
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP实现简单登录界面
2019/10/23 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
大一自我鉴定范文
2013/12/27 职场文书
3的组成教学反思
2014/04/30 职场文书
竞聘自述材料
2014/08/25 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2015年入党决心书
2015/02/05 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python