ホームページ > ウェブフロントエンド > jsチュートリアル > JS を使用して Web ページ本文の背景色を動的に変更する例を共有する

JS を使用して Web ページ本文の背景色を動的に変更する例を共有する

小云云
リリース: 2018-01-27 13:23:00
オリジナル
2745 人が閲覧しました

この記事では主にJSでWebページ本文の背景色を動的に変更するサンプルコードを紹介しますので、必要な方は参考にしていただければ幸いです。

ほとんどのWebページのデフォルトの背景色は白ですが、個人的には眩しいと感じるので、本文部分の背景色を変更するJSスクリプトを書きました。 コードは次のとおりです。

// ==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);
}) ()
ログイン後にコピー

コードは比較的単純です。本文を直接作成すると、CSS スタイル ルールがヘッドに追加されます。Web ページのコンテンツが変更されるか、非同期更新によってスタイルが削除されると、イベント リスニング メカニズムを通じてスタイルが再度ヘッドに追加されます。

本体の背景色を変更するだけなので、スクリプトの適用範囲は限られています。

関連する推奨事項:

リンクをクリックしたときに背景色を表示するjqueryメソッド

CSS3のグラデーション背景色の使用方法IE9+と互換性があります

背景色のWebページの特殊効果を表示するCSSコード

以上がJS を使用して Web ページ本文の背景色を動的に変更する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート