Greasemonkey/Tampermonkey を使用して特定の要素の CSS スタイルをオーバーライドするにはどうすればよいですか?

Greasemonkey/Tampermonkey を使用した CSS スタイルのオーバーライド

Web 開発では、CSS を通じてページ上の特定の要素の外観を変更できます (カスケード スタイル シート)。特定の CSS クラスに属している場合など、特定の条件下でのみ HTML 要素の背景画像を変更する必要がある場合は、Greasemonkey または Tampermonkey スクリプトを使用してこれを実現できます。

Greasemonkey および Tampermonkey

Greasemonkey と Tampermonkey は、ユーザーが Web ページのコンテンツと動作を変更するスクリプトを実行できるようにするブラウザ拡張機能です。これらは、CSS スタイルを変更する機能など、オンライン エクスペリエンスを向上させるためのさまざまな機能を提供します。

GM_addStyle() を使用した CSS の変更

Greasemonkey または Tampermonkey スクリプトでは、GM_addStyle() 関数を使用できます。この関数は、新しいスタイル シートをページに追加します。このスタイル シートには、既存のスタイルをオーバーライドするカスタム CSS ルールを含めることができます。

サンプル スクリプト

「」の CSS をオーバーライドするには「banner_url」クラスを作成し、その背景画像を特定の URL に設定すると、次の Greasemonkey または Tampermonkey スクリプトを使用できます:

// ==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;
    }
` );

重要な注意事項

• 使用CSS ルールの ! important フラグを使用して、競合するスタイルを確実にオーバーライドします。
• 最適なパフォーマンスを得るには、@run-at document-start を使用して、最初のページのレンダリング後にスタイルを変更することによって発生する「ちらつき」効果を最小限に抑えます。 .
• Greasemonkey 4 を使用している場合は、GM4 が必須の GM_addStyle() 関数のサポートを中止したため、Tampermonkey または Violentmonkey に切り替えることを検討してください。

代替解決策: Stylus

より高度な CSS 操作については、Stylus 拡張機能の使用を検討してください。 Stylus は、Web ページ上の CSS スタイルを管理するための強力なユーザー インターフェイスと幅広い機能を提供します。

以上がGreasemonkey/Tampermonkey を使用して特定の要素の CSS スタイルをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。