Bagaimana untuk Mengganti CSS Kelas dengan Greasemonkey/Tampermonkey?

Cara Mengganti CSS Kelas dengan Greasemonkey/Tampermonkey

Dalam senario ini, matlamatnya adalah untuk mengubah suai imej latar belakang elemen badan , khususnya apabila ia mengandungi kelas "banner_url," menggunakan skrip Greasemonkey atau Tampermonkey. Begini cara untuk mencapainya:

Menggunakan Cascade CSS

Daripada mengubah suai secara langsung gaya elemen, anda boleh menggunakan lata CSS untuk menulis ganti peraturan CSS sedia ada. Untuk melakukan ini, tambah helaian gaya pada halaman menggunakan GM_addStyle().

// ==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;
    }
`);

Dalam skrip ini, metadata "permulaan dokumen" telah ditambahkan untuk meminimumkan "kerlipan" yang mungkin berlaku jika gaya ditukar selepas pemaparan awal.

Pendekatan Alternatif dengan Greasemonkey 4

Jika anda menggunakan Greasemonkey 4, yang telah mengalih keluar GM_addStyle(), anda boleh menggunakan shim berikut untuk mengatasi isu ini:

function GM_addStyle (cssStr) {
    var D = document;
    var newNode = D.createElement('style');
    newNode.textContent = cssStr;

    var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild(newNode);
}

Manipulasi CSS tulen dengan Stylus

Selain daripada Greasemonkey dan Tampermonkey, anda juga boleh mempertimbangkan untuk menggunakan sambungan Stylus, yang menyediakan pilihan yang lebih baik untuk manipulasi CSS tulen. Ini membolehkan anda mengubah suai peraturan CSS secara langsung, menjadikannya pilihan yang lebih sesuai untuk tugas khusus ini.

Atas ialah kandungan terperinci Bagaimana untuk Mengganti CSS Kelas dengan Greasemonkey/Tampermonkey?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!