उदाहरण के लिए,
(यदि) मेरे पास यह 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?*
}
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">