Greasemonkey/Tampermonkey でクラス CSS を上書きするにはどうすればよいですか?

Greasemonkey/Tampermonkey でクラス CSS を上書きする方法

このシナリオの目標は、body 要素の背景画像を変更することです。 、特に、Greasemonkey または Tampermonkey スクリプトを使用してクラス「banner_url」が含まれている場合。これを実現する方法は次のとおりです。

CSS カスケードの使用

要素のスタイルを直接変更する代わりに、CSS カスケードを使用して既存の CSS ルールを上書きできます。これを行うには、GM_addStyle() を使用してページにスタイル シートを追加します。

// ==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() が削除された Greasemonkey 4 を使用している場合は、次のシムを使用できます。この問題を解決するには:

function GM_addStyle (cssStr) {
    var D = document;
    var newNode = D.createElement('style');
    newNode.textContent = cssStr;

    var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild(newNode);
}

Stylus を使用した純粋な CSS 操作

Greasemonkey と Tampermonkey とは別に、より良いオプションを提供する Stylus 拡張機能の使用を検討することもできます。純粋な CSS 操作用。これにより、CSS ルールを直接変更できるようになり、この特定のタスクにより適した選択肢になります。

以上がGreasemonkey/Tampermonkey でクラス CSS を上書きするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。