如何使用 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 脚本：

// ==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() 函数。

替代解决方案：Stylus

要进行更高级的 CSS 操作，请考虑使用 Stylus 扩展。 Stylus 提供了强大的用户界面和广泛的功能来管理网页上的 CSS 样式。

以上是如何使用 Greasemonkey/Tampermonkey 覆盖特定元素上的 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！