JS動態(tài)修改網(wǎng)頁body的背景色實例代碼
更新時間：2017年10月07日 09:35:07 作者：changshanfeilong
這篇文章主要介紹了JS動態(tài)修改網(wǎng)頁body的背景色實例代碼 ,需要的朋友可以參考下
大部分網(wǎng)頁默認的背景色為白色，個人感覺比較刺眼，于是寫了個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)頁內容變化或者異步更新等使樣式被移除時，通過事件監(jiān)聽機制重新添加到head上。
由于只是簡單地改變了body上的背景色，腳本的適用范圍有限。
總結
以上所述是小編給大家介紹的JS動態(tài)修改網(wǎng)頁body的背景色實例代碼 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
![[js高手之路]原型式繼承與寄生式繼承詳解](http://img.jbzj.com/images/xgimg/bcimg0.png)
下面小編就為大家?guī)硪黄猍js高手之路]原型式繼承與寄生式繼承詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
javascript中apply和call方法的作用及區(qū)別說明
本篇文章主要是對javascript中apply和call方法的作用及區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
不錯的應用，一般用于開發(fā)系統(tǒng)中，圖片新聞，直接顯示圖片2008-08-08
這篇文章主要介紹了JS 學習總結之正則表達式的懶惰性和貪婪性的相關資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了JavaScript console的使用方法,結合實例形式分析了JavaScript console的使用方法與操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)飄落星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了js如何實現(xiàn)頭像上傳并且可預覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了JS拖動鼠標畫出方框實現(xiàn)鼠標選區(qū)的方法,涉及javascript鼠標事件及頁面元素樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文通過實例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧2017-08-08
這篇文章主要介紹了JavaScript頁面回流與重繪,一個html頁面是一個整體，當這個整體中的某一個部分發(fā)生改變，那么這個頁面整體會重新進行渲染，而如果我們采用添加標簽的方式，每次添加一個標簽，就會讓每一次頁面都重新渲染，性能急劇下降,下面來看看具體內容吧2022-01-01