如何使用 Greasemonkey/Tampermonkey 覆寫特定元素上的 CSS 樣式？

使用Greasemonkey/Tampermonkey 覆蓋CSS 樣式

在Web 開發中，可以透過CSS 來更改頁面上特定元素的外觀（級聯樣式表）。如果您只需要在某些條件下修改 HTML 元素的背景圖像，例如當它屬於特定 CSS 類別時，您可以使用 Greasemonkey 或 Tampermonkey 腳本來實現此目的。

Greasemonkey 和 Tampermonkey

Greasemonkey 和 Tampermonkey 是瀏覽器擴展，允許用戶執行修改瀏覽器內容和行為的腳本網頁。它們提供了各種增強線上體驗的功能，包括修改 CSS 樣式的能力。

使用 GM_addStyle() 修改 CSS

使用Greasemonkey 或 Tampermonkey 腳本，可以使用 GM_addStyle() 函數。此函數會為頁面新增一個新的樣式表，其中可以包含覆蓋現有樣式的自訂 CSS 規則。

範例腳本

覆蓋「的CSS」 banner_url」類別並將其背景圖片設定為特定的URL，您可以使用以下Greasemonkey或Tampermonkey script:

// ==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，請考慮切換到Tampermonkey 或Violentmonkey ，因為GM4 已停止支援基本的GM_addStyle() 函數。筆擴充。

以上是如何使用 Greasemonkey/Tampermonkey 覆寫特定元素上的 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！