JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼
更新時(shí)間：2017年10月07日 09:35:07 作者：changshanfeilong
這篇文章主要介紹了JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ,需要的朋友可以參考下
大部分網(wǎng)頁(yè)默認(rèn)的背景色為白色，個(gè)人感覺(jué)比較刺眼，于是寫了個(gè)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);
}) ()
代碼比較簡(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上的背景色，腳本的適用范圍有限。
總結(jié)
以上所述是小編給大家介紹的JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
![[js高手之路]原型式繼承與寄生式繼承詳解](http://img.jbzj.com/images/xgimg/bcimg0.png)
下面小編就為大家?guī)?lái)一篇[js高手之路]原型式繼承與寄生式繼承詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript中apply和call方法的作用及區(qū)別說(shuō)明
本篇文章主要是對(duì)javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
不錯(cuò)的應(yīng)用，一般用于開(kāi)發(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ì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
這篇文章主要介紹了JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
關(guān)于JS與jQuery中的文檔加載問(wèn)題
本文通過(guò)實(shí)例代碼給大家講解了js和jquery中的文檔加載問(wèn)題，感興趣的的朋友一起看看吧2017-08-08
這篇文章主要介紹了JavaScript頁(yè)面回流與重繪,一個(gè)html頁(yè)面是一個(gè)整體，當(dāng)這個(gè)整體中的某一個(gè)部分發(fā)生改變，那么這個(gè)頁(yè)面整體會(huì)重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個(gè)標(biāo)簽，就會(huì)讓每一次頁(yè)面都重新渲染，性能急劇下降,下面來(lái)看看具體內(nèi)容吧2022-01-01