उदाहरण के लिए,

(यदि) मेरे पास यह 2d संपादक HTML रूप में है: यहां छवि विवरण दर्ज करें

और मेरे पास कोड के साथ "फ़िल्टर" नामक एक सीएसएस फ़ाइल है:

monochrome {
    filter: grayscale(var(--value, 100%)); --value:100%;
}

"मोनोक्रोम" फ़िल्टर को संपादक के Dragon पर (ड्रैगन स्प्राइट) कैनवास पर रखते समय लागू करने के तरीके क्या हैं?

<link rel="stylesheet" type="text/css" href="monochrome.css">
if (data[Blocks].id === "dragon") {
         
        *What should I write here in order to apply the css filter (only to the dragon sprite, when placing?*

}
0
Peanut Jams 27 जिंदा 2021, 21:51
यह इस बात पर निर्भर करता है कि ड्रैगन वास्तव में क्या है - क्या यह एक HTML छवि तत्व है? क्या यह एक डीआईवी है? क्या यह कैनवास है? कृपया अपने वास्तविक कोड का एक कार्यशील स्निपेट प्रदान करें जो स्पष्ट रूप से आपकी समस्या को दर्शाता है।
 – 
obscure
27 जिंदा 2021, 22:12
एक छवि तत्व।
 – 
Peanut Jams
27 जिंदा 2021, 22:20

1 उत्तर

सबसे बढ़िया उत्तर

पहला कदम CSS मोनोक्रोम परिभाषा को एक वर्ग में बदलना है। यह केवल नाम से पहले एक बिंदु जोड़कर किया जाता है उदा।

.monochrome {
    filter: grayscale(var(--value, 100%));
}

इसे इस तरह से परिभाषित करना इसे कई HTML तत्वों द्वारा पुन: प्रयोज्य बनाता है - क्योंकि आपका ड्रैगन एकमात्र ऐसा तत्व नहीं हो सकता है जिस पर आप फ़िल्टर लागू करना चाहते हैं।

जैसा कि हमारे पास एक सीएसएस वर्ग है, अब हम इसे अलग-अलग वस्तुओं पर कॉल करके लागू कर सकते हैं

theObject.classList.add("monochrome");

या

theObject.classList.remove("monochrome");

जबकि जोड़ें / निकालें जैसा कि इसका नाम है, उद्धरणों में दिए गए CSS वर्ग को जोड़ता या हटाता है।

लेकिन हमें theObject का संदर्भ कैसे मिलता है? यदि आपने अपने एचटीएमएल तत्वों को इसकी आईडी संपत्ति का उपयोग करके एक अद्वितीय आईडी दी है तो यह काफी आसान है:

document.getElementById("id")

हालांकि सावधान रहें - यह आपके द्वारा अपनी पोस्ट में उल्लिखित id से कुछ अलग है।

यहाँ एक उदाहरण है:

document.getElementById("monochromeButton").addEventListener("click", function() {
  document.getElementById("dragon").classList.add("monochrome");
});
document.getElementById("removeButton").addEventListener("click", function() {
  document.getElementById("dragon").classList.remove("monochrome");
});
.monochrome {
  filter: grayscale(var(--value, 100%));
}
<button id="monochromeButton">
monochrome
</button>
<button id="removeButton">
remove filter
</button>
<br>
<img id="dragon" src="https://picsum.photos/id/237/200/140">
0
obscure 27 जिंदा 2021, 22:43