如何使用 Greasemonkey 或 Tampermonkey 脚本覆盖类 CSS？

如何使用 Greasemonkey 或 Tampermonkey 脚本更改类 CSS

您正在尝试修改 body 元素的背景图像，特别是当它有“banner_url”类。虽然您最初使用 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中文网其他相关文章！