Bagaimanakah saya boleh mengatasi gaya CSS pada elemen tertentu menggunakan Greasemonkey/Tampermonkey?

Mary-Kate Olsen
Lepaskan: 2024-11-03 12:02:03
asal
969 orang telah melayarinya

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

Mengatasi Gaya CSS dengan Greasemonkey/Tampermonkey

Dalam pembangunan web, mengubah rupa elemen tertentu pada halaman boleh dicapai melalui CSS ( Lembaran Gaya Lata). Jika anda perlu mengubah suai imej latar belakang elemen HTML hanya dalam keadaan tertentu, seperti apabila ia tergolong dalam kelas CSS tertentu, anda boleh mencapainya menggunakan skrip Greasemonkey atau Tampermonkey.

Greasemonkey dan Tampermonkey

Greasemonkey dan Tampermonkey ialah sambungan penyemak imbas yang membenarkan pengguna melaksanakan skrip yang mengubah suai kandungan dan tingkah laku halaman web. Mereka menyediakan pelbagai ciri untuk meningkatkan pengalaman dalam talian, termasuk keupayaan untuk mengubah suai gaya CSS.

Mengubah suai CSS dengan GM_addStyle()

Untuk mengubah suai CSS halaman menggunakan Skrip Greasemonkey atau Tampermonkey, anda boleh menggunakan fungsi GM_addStyle(). Fungsi ini menambah helaian gaya baharu pada halaman, yang boleh mengandungi peraturan CSS tersuai yang mengatasi gaya sedia ada.

Skrip Contoh

Untuk mengatasi CSS bagi " banner_url" dan tetapkan imej latar belakangnya kepada URL tertentu, anda boleh menggunakan skrip Greasemonkey atau Tampermonkey berikut:

// ==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;
    }
` );
Salin selepas log masuk

Nota Penting

  • Gunakan bendera !penting dalam peraturan CSS anda untuk memastikan ia mengatasi mana-mana gaya yang bercanggah.
  • Untuk prestasi optimum, gunakan @run-at document-start untuk meminimumkan kesan "kerlipan" yang disebabkan oleh perubahan gaya selepas pemaparan halaman awal .
  • Jika anda menggunakan Greasemonkey 4, pertimbangkan untuk bertukar kepada Tampermonkey atau Violentmonkey kerana GM4 telah menghentikan sokongan untuk fungsi GM_addStyle() yang penting.

Penyelesaian Alternatif: Stylus

Untuk manipulasi CSS yang lebih maju, pertimbangkan untuk menggunakan sambungan Stylus. Stylus menyediakan antara muka pengguna yang berkuasa dan pelbagai ciri untuk mengurus gaya CSS pada halaman web.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengatasi gaya CSS pada elemen tertentu menggunakan Greasemonkey/Tampermonkey?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan