Greasemonkey または Tampermonkey スクリプトを使用してクラス CSS をオーバーライドする方法

Greasemonkey または Tampermonkey スクリプトを使用してクラス CSS を変更する方法

特に body 要素の背景画像を変更しようとしている場合「banner_url」クラスがあります。 getElementByClassName を使用した最初のアプローチは成功しませんでしたが、Greasemonkey または Tampermonkey スクリプトを使用する簡単な解決策があります。

CSS Cascade と GM_addStyle を利用する

目的の結果を達成するには、 CSS カスケードと GM_addStyle() 関数を使用して、カスタム CSS ルールをページ。 ! important フラグを使用すると、潜在的な競合をオーバーライドできます。さらに、@run-at document-start (または Stylus 拡張機能) を使用すると、レンダリング後のスタイルの変更に伴う視覚的なちらつきが最小限に抑えられます。

完全なスクリプト

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

注: Greasemonkey 4 を使用している場合、その GM_addStyle() 機能は信頼できない。信頼性を高めるために、Tampermonkey または Violentmonkey に切り替えることを検討してください。 GM4 を使用したい人のために、互換性シムが提供されています。

純粋な CSS 操作

純粋な CSS 操作の場合は、Stylus 拡張機能の使用を検討してください。これは、CSS 管理のための優れた柔軟性と専用インターフェイスを提供するため、このコンテキストでは Greasemonkey や Tampermonkey よりも適切なオプションになります。

以上がGreasemonkey または Tampermonkey スクリプトを使用してクラス CSS をオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。