這篇文章給大家分享的是有關(guān)JS如何動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

十余年的儀征網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整儀征建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“儀征網(wǎng)站設(shè)計(jì)”,“儀征網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

代碼如下：

// ==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);
}) ()

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

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

感謝各位的閱讀！關(guān)于“JS如何動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！