如何使用 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中文网其他相关文章！