एक Greasemonkey/Tampermonkey स्क्रिप्ट के साथ क्लास सीएसएस कैसे बदलें?

मैं शरीर की पृष्ठभूमि छवि सेट करने की कोशिश कर रहा हूं, लेकिन केवल यह banner_url वर्ग का उपयोग करता है। एचटीएमएल इस प्रकार है:एक Greasemonkey/Tampermonkey स्क्रिप्ट के साथ क्लास सीएसएस कैसे बदलें?

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

असल में, मैं बजाय निम्नलिखित सीएसएस का उपयोग करने के लिए मजबूर पेज चाहते हैं:

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

मैं इस Greasemonkey का उपयोग कर ऐसा करने के लिए करता है, तो यह किसी भी फर्क नहीं पड़ता कोशिश कर रहा हूँ। क्या किसी को पता है कि मैं इसके बारे में कैसे जा सकता हूं? मैंने निम्नलिखित के साथ शुरुआत की, हालांकि इसमें बहुत भाग्य नहीं था:

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

स्रोत

2013-10-15 Xeo

इसके लिए समझ में सिर्फ सीएसएस झरना उपयोग करने के लिए यकीन नहीं है। GM_addStyle() के साथ पृष्ठ पर एक स्टाइल शीट जोड़ें। ध्यान दें कि हम कुछ संभावित संघर्षों को कवर करने के लिए !important ध्वज का उपयोग करते हैं।

एक पूरी स्क्रिप्ट:

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

ध्यान दें कि अगर आप Greasemonkey 4 उपयोग कर रहे हैं, यह GM_addStyle()^{(और एक महान कई अन्य चीजें) का पर्दाफाश किया है}।
यह दृढ़ता से अनुशंसा करता है कि आप टैम्पर्मोनकी या व्हायोलेंटमकी पर स्विच करें।
वास्तव में, Greasemonkey के नियंत्रक डेवलपर says as much himself।

मतलब समय में, यहाँ उन masochists कि 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); 
}

इसके अलावा, शुद्ध सीएसएस हेरफेर के लिए, the Stylish add-on Greasemonkey/Tampermonkey तुलना में एक बेहतर विकल्प है।

स्रोत

2013-10-15 22:24:56

धन्यवाद में निर्दिष्ट सभी अन्य गुणों को छोड़ना चाहिए। मुझे एहसास नहीं हुआ कि यह संभव था! मुझे वास्तव में छवियों को यादृच्छिक करने के लिए कुछ जावास्क्रिप्ट मिला है इसलिए मुझे जीएम का उपयोग करने की आवश्यकता है। यह एक जाने देगा और आपको बताएगा! – Xeo

ठीक है, यह काम करता है। हालांकि ब्याज से, क्या आप जानते हैं कि मैं शुद्ध जावास्क्रिप्ट में -ओ-पृष्ठभूमि-आकार जैसे तत्वों का उपयोग कैसे करूं? – Xeo

उस संपत्ति के लिए उपसर्ग छोड़ दें और शैली गुणों के लिए DOM-मानक नोटेशन का उपयोग करें। उदाहरण के लिए: '.style.backgroundSize =" 60px 80px "'। ब्राउज़र-विशिष्ट उपसर्ग एक विशेष मामला है, लेकिन आपको 'पृष्ठभूमि-आकार' के लिए उनकी आवश्यकता नहीं है; सभी आधुनिक + प्रमुख ब्राउज़र इसका समर्थन करते हैं।(जब आपको ब्राउज़र उपसर्गों के साथ झगड़ा करने की आवश्यकता होती है तो सीएसएस प्रश्न खोजें।) –

इस तरह के बारे में क्या?

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

लेकिन मैं मानता चाहिए मैं, सवाल

स्रोत

2013-10-15 15:57:41

असल में, मैं ऊपर दिए गए सीएसएस को पृष्ठ – Xeo

में मजबूर करने के लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं, हालांकि बाकी सीएसएस सेट करने में सक्षम होना चाहिए। पृष्ठभूमि छवि के लिए पैरामीटर सेट करना इसे काम करने से रोकता है। – Xeo

आपके पास कितनी अलग पृष्ठभूमि हैं? क्या उन्हें किसी भी तरह से सीएसएस फ़ाइल में सूचीबद्ध करने के लिए स्वीकार्य होगा या सूची सर्वर से लोड गतिशील सामग्री होगी? मैं खुद ग्रीसमोन्की में नहीं हूं इसलिए मुझे नहीं पता कि यह कितना दूर है। "सामान्य" एचटीएमएल + सीएसएस में, मेरे उत्तर का केवल पृष्ठभूमि-छवि पर प्रभाव होना चाहिए, सीएसएस फ़ाइल –

एक Greasemonkey/Tampermonkey स्क्रिप्ट के साथ क्लास सीएसएस कैसे बदलें?

उत्तर

संबंधित मुद्दे