HTML DOM Style filter प्रॉपर्टी

परिचय

HTML DOM Style filter प्रॉपर्टी का उपयोग किसी एलिमेंट पर विज़ुअल इफेक्ट्स परिभाषित करने के लिए किया जाता है। यह इमेज और अन्य एलिमेंट्स पर ब्लर, ब्राइटनेस, कंट्रास्ट, ग्रेस्केल जैसे प्रभाव लागू करने की अनुमति देता है।

सिंटैक्स

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

फिल्टर मान और विवरण

फिल्टर	विवरण
`none`	कोई प्रभाव निर्दिष्ट नहीं करता।
`blur(px)`	ब्लर प्रभाव लागू करता है।
`brightness(%)`	इमेज की ब्राइटनेस समायोजित करता है। 100% (मूल इमेज) से ऊपर तक मान लेता है।
`contrast(%)`	इमेज का कंट्रास्ट समायोजित करता है। 0% (पूरी तरह काला), 100% (मूल इमेज) और 100% से ऊपर यह कम कंट्रास्ट होगा।
`drop-shadow(h-shadow v-shadow blur spread color)`	इमेज पर ड्रॉप शैडो लागू करता है।
`grayscale(%)`	इमेज को ग्रेस्केल में बदलता है। 0% मूल इमेज दर्शाता है और 100% इसे पूरी तरह ग्रे बना देता है।
`hue-rotate(deg)`	दिए गए डिग्री पैरामीटर के साथ इमेज पर ह्यू रोटेशन लागू करता है। डिफ़ॉल्ट मान 0 डिग्री है जो मूल इमेज दर्शाता है और 360deg तक जा सकता है।
`invert(%)`	इमेज में सैंपल्स को इनवर्ट करता है।
`opacity(%)`	इमेज के लिए अपारदर्शिता स्तर सेट करता है। 0% (पूरी तरह पारदर्शी) से 100% (मूल इमेज और डिफ़ॉल्ट मान) तक।
`saturate(%)`	इमेज को सैचुरेट करता है।
`sepia(%)`	इमेज को सेपिया में बदलता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
  #one {
    filter: hue-rotate(90deg);
  }
</style>
<script>
  function changeFilter() {
    document.getElementById("one").style.filter = "sepia(40%)";
    document.getElementById("Sample").innerHTML = "उपरोक्त इमेज पर अब सेपिया फिल्टर लागू है";
  }
</script>
</head>
<body>
  <img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
  <p>नीचे दिए गए बटन पर क्लिक करके ऊपर की इमेज का फिल्टर प्रॉपर्टी बदलें</p>
  <button onclick="changeFilter()">फिल्टर बदलें</button>
  <p id="Sample"></p>
</body>
</html>

आउटपुट

प्रारंभिक स्थिति (hue-rotate(90deg) लागू):

HTML DOM Style filter प्रॉपर्टी

"फिल्टर बदलें" बटन पर क्लिक करने के बाद (sepia(40%) लागू):

HTML DOM Style filter प्रॉपर्टी