如何使用 Greasemonkey 或 Tampermonkey 腳本覆蓋類別 CSS？

如何使用Greasemonkey 或Tampermonkey 腳本更改類CSS

您正在嘗試修改body 元素的背景圖像，特別是當它有「bannerurl_ ”類。雖然您最初使用 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中文網其他相關文章！