गतिशील रूप से सीएसएस फ़िल्टर

Question

गतिशील रूप से सीएसएस फ़िल्टर कैसे लागू करें? मैंने क्रोम के लिए निम्न कोशिश की है।

image.style = "-webkit-filter: brightness(50%);"; 

Answer 1

आप style वस्तु के लिए नहीं, webkitFilter संपत्ति के मूल्य निर्धारित करना चाहिए । इस वाक्य रचना will work:

image.style.webkitFilter = "brightness(50%)"; 

आप जावास्क्रिप्ट संपत्ति नाम पता नहीं है, तो आप इसे सीएसएस संपत्ति द्वारा संदर्भित कर सकते हैं (karaxuna तरह का सुझाव दिया, will work too):

image.style["-webkit-filter"] = "brightness(50%)"; 

Answer 2

एक वर्ग के लिए कि फ़िल्टर जोड़ें:

.bright { 
    -webkit-filter: brightness(50%); 
} 

और टॉगल उस वर्ग:

image.classList.toggle('bright'); 

Answer 3

image.style["-webkit-filter"] = "brightness(50%)"; 

Answer 4

1) ब्राउज़र सीएसएस का समर्थन करता है की जाँच करें -filters (यदि आवश्यक)
2) का पता लगाने अगर "फिल्टर" संपत्ति वर्तमान ब्राउज़र में विक्रेता की जरूरत है और यह प्रारूप में
3) सेट फ़िल्टर मान बचाने:

el.style["-vendor-filter"] = value; 

या

el.style.vendorFilter = value; 

चेक इसके लिए छोटे डेमो: http://malyw.github.io/css-filters/