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è)人感覺比較刺眼，于是寫了個(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)聽機(jī)制重新添加到head上。
由于只是簡(jiǎn)單地改變了body上的背景色，腳本的適用范圍有限。
總結(jié)
以上所述是小編給大家介紹的JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了JS實(shí)現(xiàn)光滑展開合攏的菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷并改變頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧
這篇文章主要為大家介紹了JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
async表示異步,而await可以看作async wait,個(gè)人對(duì)async與await的簡(jiǎn)單理解就是,我們可以用同步的方式去書寫異步代碼,這篇文章主要給大家介紹了關(guān)于JS中如何優(yōu)雅的使用async await的相關(guān)資料,需要的朋友可以參考下2021-10-10
js實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)抽獎(jiǎng)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
JavaScript常用數(shù)組去重的方法及對(duì)比詳解
數(shù)組去重在面試和工作中都是比較容易見到的問(wèn)題。這篇文章主要是來(lái)測(cè)試多個(gè)方法，對(duì)下面這個(gè)數(shù)組的去重結(jié)果進(jìn)行分析討論，需要的可以參考一下2022-07-07
JS中字符問(wèn)題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)
對(duì)于js的進(jìn)制轉(zhuǎn)換的一些方法分析2008-11-11
JavaScript設(shè)計(jì)模式之策略模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06