Comment changer une classe CSS avec un script Greasemonkey/Tampermonkey?
j'essaie de définir l'image de fond du corps, mais seulement là où il utilise la classe banner_url. Le HTML est comme suit:
<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">
En Gros, j'aimerais forcer la page à utiliser les CSS suivants à la place:
.banner_url {
background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
j'essaie de le faire en utilisant Greasemonkey si cela fait une différence. Personne ne sait comment je peux aller à ce sujet? J'ai commencé par celui-ci, cependant, n'ont pas eu beaucoup de chance:
function randomBG(){
document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
}
randomBG();
2 réponses
pour cela, il suffit d'utiliser la cascade CSS. Ajouter une feuille de style à la page avec GM_addStyle().
Remarque:
- Nous
!importantdrapeau pour couvrir certains conflits potentiels. - Utiliser
@run-at document-start(ou utilisez le Stylet, voir ci-dessous) pour minimiser le "clignotement" associé au changement de styles après le rendu initial.
Un script complet:
// ==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;
}
` );
Notez que si vous utilisez Greasemonkey 4, il a éclaté GM_addStyle() (et beaucoup d'autres choses).
C'est fortement recommandé de passer à Tampermonkey ou Violentmonkey.
En fait, Greasemonkey contrôle le développeur en dit autant de lui-même.
en attendant, voici un shim pour les masochistes qui persistent avec GM4:
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);
}
également, pour pure manipulation CSS, le stylé extension du stylet est un meilleur choix que Greasemonkey / Tampermonkey.
Qu'en est-il de quelque chose comme ça ?
document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";
mais je dois admettre que je ne suis pas sûr de comprendre la question