如何使用 Greasemonkey/Tampermonkey 覆寫類別 CSS？

如何使用Greasemonkey/Tampermonkey 覆蓋Class CSS

在此場景中，目標是修改body 元素的背景圖像，特別是當它包含類別「banner_url」時，使用Greasemonkey 或Tampermonkey 腳本。實作方法如下：

使用 CSS Cascade

您可以使用 CSS Cascade 來覆寫現有的 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 的替代方法

如果您使用的是Greasemonkey 4，它已刪除GM_addStyle()，您可以使用以下墊片解決這個問題：

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中文網其他相關文章！