Bagaimana untuk Mengatasi CSS Kelas Menggunakan Skrip Greasemonkey atau Tampermonkey?

Cara Mengubah CSS Kelas Menggunakan Skrip Greasemonkey atau Tampermonkey

Anda cuba mengubah suai imej latar belakang elemen badan secara khusus apabila ia mempunyai kelas "banner_url". Walaupun pendekatan awal anda dengan getElementByClassName tidak berjaya, terdapat penyelesaian mudah menggunakan skrip Greasemonkey atau Tampermonkey.

Menggunakan CSS Cascade dan GM_addStyle

Untuk mencapai hasil yang anda inginkan, menggunakan lata CSS dan fungsi GM_addStyle() untuk menyuntik peraturan CSS tersuai ke dalam halaman. Dengan menggunakan bendera !important, anda boleh mengatasi sebarang kemungkinan konflik. Selain itu, menggunakan @run-at document-start (atau sambungan Stylus) meminimumkan kelipan visual yang dikaitkan dengan perubahan gaya pasca paparan.

Skrip Lengkap

// ==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: Jika anda menggunakan Greasemonkey 4, fungsi GM_addStyle()nya tidak boleh dipercayai. Pertimbangkan untuk bertukar kepada Tampermonkey atau Violentmonkey untuk meningkatkan kebolehpercayaan. Shim keserasian disediakan untuk mereka yang berkeras untuk menggunakan GM4.

Manipulasi CSS Tulen

Untuk manipulasi CSS tulen, pertimbangkan untuk menggunakan sambungan Stylus. Ia menawarkan fleksibiliti yang lebih besar dan antara muka khusus untuk pengurusan CSS, menjadikannya pilihan yang lebih sesuai daripada Greasemonkey atau Tampermonkey dalam konteks ini.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi CSS Kelas Menggunakan Skrip Greasemonkey atau Tampermonkey?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!