javascript - ¿Cómo cambiar una clase CSS con un script Greasemonkey/Tampermonkey?
userscripts (2)
¿Qué pasa con algo como esto?
document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url(''http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg'')";
Pero debo admitir que no estoy seguro de entender la pregunta
Estoy tratando de establecer la imagen de fondo del cuerpo, pero solo donde usa la clase banner_url . El HTML es el siguiente:
<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">
Básicamente, me gustaría forzar a la página a usar el siguiente CSS en su lugar:
.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;
}
Estoy tratando de hacer esto usando Greasemonkey si hace alguna diferencia. ¿Alguien sabe cómo puedo hacer esto? Comencé con lo siguiente, sin embargo no he tenido mucha suerte:
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();
Para esto, solo usa la cascada de CSS. Agregue una hoja de estilo a la página con GM_addStyle() .
Nota:
- Usamos la bandera
!importantpara cubrir ciertos conflictos potenciales. - Use
@run-at document-start(o use Stylus, vea a continuación) para minimizar el "parpadeo" asociado con el cambio de estilos después del procesamiento inicial.
Un guión completo:
// ==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;
}
` );
Tenga en cuenta que si está utilizando Greasemonkey 4 , se ha roto GM_addStyle() (y muchas otras cosas) .
Se recomienda encarecidamente que cambie a Tampermonkey o Violentmonkey.
De hecho, el desarrollador controlador de Greasemonkey lo dice también .
Mientras tanto, aquí hay un problema para los masoquistas que persisten con 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);
}
Además, por pura manipulación de CSS, la Elegante La extensión Stylus es una mejor opción que Greasemonkey / Tampermonkey.