HTML DOM स्टाइल फ़िल्टर गुण का उपयोग किसी तत्व के दृश्य प्रभावों को परिभाषित करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैफ़िल्टर गुण सेट करना -
object.style.filter ="कोई नहीं | धुंधला () | चमक () | कंट्रास्ट () | ड्रॉप-शैडो () | ग्रेस्केल () | ह्यू-रोटेट () | इनवर्ट () | अस्पष्टता () | संतृप्त ( ) | सेपिया ()"
उपरोक्त संपत्ति मूल्यों को इस प्रकार समझाया गया है -
| फ़िल्टर <वें>विवरण | |
|---|---|
| कोई नहीं | यह कोई प्रभाव निर्दिष्ट नहीं करता है। |
| धुंधला(px) | यह धुंधला प्रभाव लागू करता है। |
| चमक(%) | छवि चमक को समायोजित करने के लिए। मान को 100% (ओरिजिनल इमेज) से ऊपर ले जाता है। |
| कंट्रास्ट(%) | छवि कंट्रास्ट को समायोजित करने के लिए। 0% (पूरी तरह से काला), 100% (मूल छवि) से मूल्य लेता है और 100% से ऊपर यह कम विपरीत होगा। |
| ड्रॉप-शैडो(h-shadowv-छाया धुंधला फैला हुआ रंग) | छवि पर ड्रॉप शैडो लगाने के लिए। |
| ग्रेस्केल(%) | छवि को ग्रेस्केल में बदलने के लिए 0% मूल छवि का प्रतिनिधित्व करता है और 100% इसे पूरी तरह से ग्रे बनाता है। |
| ह्यू-रोटेट (डिग्री) | एस्पेरामीटर दिए गए डिग्री के साथ छवि पर ह्यू रोटेशन लागू करने के लिए। डिफ़ॉल्ट मान 0 डिग्री है जो मूल छवि का प्रतिनिधित्व करता है और 360 डिग्री तक जा सकता है। |
| उलटा(%) | छवि में नमूनों को बदलने के लिए। |
| अस्पष्टता(%) | छवि के लिए 0% (पूरी तरह से पारदर्शी) से लेकर 100% (मूल छवि और डिफ़ॉल्ट मान) के लिए अस्पष्टता स्तर को पूर्वनिर्धारित करना। |
| saturate(%) | छवि को संतृप्त करता है। |
| सेपिया(%) | छवि को सीपिया में बदलें। |
आइए फ़िल्टर गुण के लिए एक उदाहरण देखें -
उदाहरण
<सिर> <शैली> # एक { फ़िल्टर:ह्यू-रोटेट (90 डिग्री); } 
नीचे दिए गए बटन पर क्लिक करके उपरोक्त छवि फ़िल्टर गुण को बदलें
<बटन onclick="changeFilter()">फ़िल्टर बदलें