首頁  >  文章  >  web前端  >  如何使用 Greasemonkey/Tampermonkey 覆寫特定元素上的 CSS 樣式?

如何使用 Greasemonkey/Tampermonkey 覆寫特定元素上的 CSS 樣式?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-03 12:02:03958瀏覽

How can I override CSS styles on specific elements using Greasemonkey/Tampermonkey?

使用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 script:

// ==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() 函數。筆擴充。

以上是如何使用 Greasemonkey/Tampermonkey 覆寫特定元素上的 CSS 樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn