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上的背景色,脚本的适用范围有限。

相关推荐:

jquery实现点击a链接处显示背景色的方法

CSS3 渐变背景色使用方法 兼容IE9+

显示背景色网页特效CSS代码

以上就是JS动态修改网页body的背景色实例分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2788638.html

(0)
上一篇 2025年3月8日 18:29:12
下一篇 2025年2月24日 04:08:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS表格排序操作实现代码

    本文主要介绍了js实现简单表格排序操作,结合具体实例形式分析了javascript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下,希望能帮助到大家。     sort table   *{ margin:0px; paddi…

    2025年3月8日
    200
  • 几种javascript数组定义的方法详解

    关于数组定义的方法大家了解多少?一般来说分为隐式创建、直接实例化、创建数组并指定长度、后来为了方便直接使用json格式定义数组,本文就和大家分享几种javascript数组定义的方法详解,希望能帮助到大家。 1、什么是数组 数组就是一组数据…

    编程技术 2025年3月8日
    200
  • node.js中http模块和url模块简介

    本文主要给大家简单介绍了关于node.js中的http模块和url模块,文中通过示例代码介绍的非常详细,对大家学习或者使用node.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习,希望能帮助到大家。 前言 本文主要给大家介绍…

    2025年3月8日 编程技术
    200
  • vuejs使用递归组件实现树形目录

    本文主要介绍了vuejs使用递归组件实现树形目录的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这…

    2025年3月8日
    200
  • 两种js实现轮播图的方式

    本文主要为大家详细介绍了js实现轮播图的两种方式,一是构造函数、另一种是面向对象方式方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 1、构造函数 nbsp;html>        *{ margin:0;…

    编程技术 2025年3月8日
    200
  • JS实现div点击跳转到另一页面实例代码

    本文主要介绍了js动态添加的p点击跳转到另一页面实现代码,需要的朋友可以参考下,希望能帮助到大家。  p调用函数跳转: var obj = document.getElementById(‘id’);obj.onclick=function…

    编程技术 2025年3月8日
    200
  • vuejs使用$emit和$on进行组件间的传值

    $emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了。本文主要介绍了vuejs使用$emit和$on进行组件之间的传值的示例,具有一定的参考价值,有兴趣…

    2025年3月8日
    200
  • JS数据访问对象模式详解

    本文主要为大家带来一篇js设计模式之数据访问对象模式的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 问题 大部分网站会将一些数据(如:用户Token)存储在前端,用来实现页面间的…

    编程技术 2025年3月8日
    200
  • D3.js创建物流地图实例分享

    本文主要介绍了使用d3.js创建物流地图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 示例图 制作思路 需要绘制一张中国地图,做为背景。 需要主要城市的经纬坐标,以绘制路张起点和…

    2025年3月8日
    200
  • javascript定时器实现进度条功能

    本文主要介绍javascript基于定时器实现进度条功能,简单分析了javascript定时器的功能、使用方法并给出了基于定时器实现的进度条功能实例,需要的朋友可以参考下,希望能帮助到大家。 Javascript 中的定时器 window度…

    2025年3月8日
    200

发表回复

登录后才能评论