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实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JavaScript中数组Array方法详解
2017/02/27 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
教师现实表现材料
2014/02/14 职场文书
《社戏》教学反思
2014/04/15 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
行政介绍信范文
2015/05/04 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
开学第一天的感想
2015/08/10 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL