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
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!