Bagaimanakah saya boleh mengatasi gaya CSS pada elemen tertentu menggunakan 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;
    }
` );

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!