JS動態(tài)修改網(wǎng)頁body的背景色實(shí)例代碼

更新時間：2017年10月07日 09:35:07 作者：changshanfeilong

這篇文章主要介紹了JS動態(tài)修改網(wǎng)頁body的背景色實(shí)例代碼 ,需要的朋友可以參考下

大部分網(wǎng)頁默認(rèn)的背景色為白色，個人感覺比較刺眼，于是寫了個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);
}) ()

代碼比較簡單，直接創(chuàng)建了一個body上的css樣式規(guī)則，然后添加到head里，如果網(wǎng)頁內(nèi)容變化或者異步更新等使樣式被移除時，通過事件監(jiān)聽機(jī)制重新添加到head上。

由于只是簡單地改變了body上的背景色，腳本的適用范圍有限。

總結(jié)

以上所述是小編給大家介紹的JS動態(tài)修改網(wǎng)頁body的背景色實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

[js高手之路]原型式繼承與寄生式繼承詳解
下面小編就為大家?guī)硪黄猍js高手之路]原型式繼承與寄生式繼承詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
javascript中apply和call方法的作用及區(qū)別說明
本篇文章主要是對javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
js 文本框里粘貼一個圖片url并顯示
不錯的應(yīng)用，一般用于開發(fā)系統(tǒng)中，圖片新聞，直接顯示圖片
2008-08-08
JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性
這篇文章主要介紹了JS 學(xué)習(xí)總結(jié)之正則表達(dá)式的懶惰性和貪婪性的相關(guān)資料,需要的朋友可以參考下
2017-07-07
JavaScript console的使用方法實(shí)例分析
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實(shí)例形式分析了JavaScript console的使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
基于JavaScript實(shí)現(xiàn)飄落星星特效
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
2020-12-12
JS拖動鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
這篇文章主要介紹了JS拖動鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法,涉及javascript鼠標(biāo)事件及頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
關(guān)于JS與jQuery中的文檔加載問題
本文通過實(shí)例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧
2017-08-08
JavaScript頁面回流與重繪
這篇文章主要介紹了JavaScript頁面回流與重繪,一個html頁面是一個整體，當(dāng)這個整體中的某一個部分發(fā)生改變，那么這個頁面整體會重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個標(biāo)簽，就會讓每一次頁面都重新渲染，性能急劇下降,下面來看看具體內(nèi)容吧
2022-01-01