JS动态修改网页body的背景色实例代码
时间:2019-04-07
本文章向大家介绍JS动态修改网页body的背景色实例代码,主要包括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的背景色实例代码 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- 枚举算法(Enumeration algorithm)实例一
- 剑指offer代码解析——面试题16反转单链表
- QMainWindow 和 QWidget 设置layout
- 安全工具Aircrack-ng的使用
- Windows Server 2008 R2 搭建微信小程序
- insert事务产生duplicate key error引发的死锁分析
- 零基础入门深度学习 | 第六章:长短时记忆网络(LSTM)
- 第6章 I/O复用:select和poll函数
- 第7章 套接字选项
- 第8章 基本UDP套接字编程
- 第11章 名字与地址转换
- explicit_defaults_for_timestamp参数导致复制中断
- 剑指offer代码解析——面试题15求链表中倒数第K个结点
- 第15章 Unix域协议
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [剑指Offer]面试题25: 合并两个排序的链表
- 环形链表
- 二十年前做科研你只需要检测一些基因在一些癌症细胞系表达量情况即可
- [剑指Offfer]面试题22: 链表中倒数第k个节点
- Django开发快速入门
- 三阴性乳腺癌表达数据分析笔记之PAM50
- Celery入门
- TO-do api
- 炫酷,Spring Boot + ECharts 实现用户访问地图可视化(附源码)
- 互联网大厂常考算法及套路深度解析
- 2020--Python语法常考知识点
- 为什么你画的Seurat包PCA图与别人的方向不一致?
- 用Python程序模拟300位观众,为5位嘉宾随机投票,最后按照降序排列结果
- Python知识点
- 上盘硬菜,@Transaction源码深度解析 | Spring系列第48篇