この記事では主に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+と互換性があります
以上がJS を使用して Web ページ本文の背景色を動的に変更する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。