Wie ändere ich eine Klasse CSS mit einem Greasemonkey/Tampermonkey Skript?

Ich versuche, das Hintergrundbild des Körpers zu setzen, aber nur dort, wo es die Klasse banner_url verwendet. Der HTML-Code ist wie folgt:Wie ändere ich eine Klasse CSS mit einem Greasemonkey/Tampermonkey Skript?

<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">

Grundsätzlich würde Ich mag die Seite zwingen, die folgende CSS zu verwenden, anstatt:

.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; 
}

Ich versuche, dies mit Grease zu tun, wenn es einen Unterschied macht. Weiß jemand, wie ich das machen kann? Ich fing mit dem folgenden an, hatte aber nicht viel Glück:

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();

Quelle

2013-10-15 Xeo

Um dies zu verstehen, verwenden Sie nur die CSS-Kaskade. Fügen Sie der Seite ein Stylesheet mit GM_addStyle() hinzu. Beachten Sie, dass wir das Flag !important verwenden, um bestimmte potenzielle Konflikte zu erfassen.

Ein komplettes Skript:

// ==UserScript== 
// @name  _Override banner_url styles 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @grant GM_addStyle 
// ==/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; 
    } 
`);

Beachten Sie, dass , wenn Sie mit Grease 4, es GM_addStyle()^{(und sehr viele andere Dinge)} gesprengt hat.
Es ist dringend empfohlen, dass Sie zu Tampermonkey oder Violentmonkey wechseln.
In der Tat, Greasemonkey Controlling-Entwickler says as much himself.

In der Zwischenzeit, hier ist ein Shim für die Masochisten, die mit GM 4 bestehen:

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); 
}

Auch für reine CSS-Manipulation, the Stylish add-on eine Wahl ist besser als Grease/Tampermonkey.

Quelle

2013-10-15 22:24:56

angegeben. Danke. Ich wusste nicht, dass das möglich ist! Ich habe tatsächlich ein Javascript, um die Bilder zu randomisieren, also muss ich GM benutzen. Werde es versuchen und es wissen lassen! – Xeo

OK, das funktioniert. Aber wissen Sie aus Interesse, wie ich in reinem Javascript Elemente wie -o-background-size verwenden würde? – Xeo

Geben Sie das Präfix für diese Eigenschaft aus und verwenden Sie die DOM-Standardnotation für Stileigenschaften. Zum Beispiel: '.style.backgroundSize =" 60px 80px "'. Browser-spezifische Präfixe sind ein Sonderfall, aber Sie brauchen sie nicht für 'Hintergrundgröße'; alle modernen + wichtigsten Browser unterstützen es.(Suchen Sie CSS-Fragen, wenn Sie mit Browserpräfixen aufräumen müssen.) –

Was ist mit so etwas?

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

Aber ich muss zugeben, ich bin nicht sicher, ob die Frage

Quelle

2013-10-15 15:57:41

Grundsätzlich möchte ich Javascript verwenden, um die CSS oben in die Seite – Xeo

oben zu zwingen, aber in der Lage sein, den Rest der CSS einzustellen. Wenn Sie die Parameter für das Hintergrundbild festlegen, wird die Arbeit gestoppt. – Xeo

Wie viele verschiedene Hintergründe hast du? Wäre es akzeptabel, sie irgendwie in der CSS-Datei aufgelistet zu haben, oder wäre die Liste dynamischer Inhalt, der vom Server geladen wird? Ich bin nicht auf GreaseMonkey selbst, also weiß ich nicht, wie weit es geht. In "normalem" HTML + CSS sollte meine Antwort nur Auswirkungen auf das Hintergrundbild haben und alle anderen Eigenschaften wie in der CSS-Datei –

Wie ändere ich eine Klasse CSS mit einem Greasemonkey/Tampermonkey Skript?

Antwort

Verwandte Themen