style.opacity प्रॉपर्टी क्या है?
DOM style.opacity प्रॉपर्टी किसी तत्व की पारदर्शिता (ओपेसिटी) को प्राप्त या सेट करती है। मान 0.0 (पूरी तरह पारदर्शी/अदृश्य) से 1.0 (पूरी तरह अपारदर्शी/दृश्यमान) के बीच होता है। यह CSS opacity प्रॉपर्टी के अनुरूप है।
सिंटैक्स
ओपेसिटी प्राप्त करना
object.style.opacityओपेसिटी सेट करना
object.style.opacity = "value"मान
0.0से1.0के बीच की संख्या (या स्ट्रिंग)।inherit,initial,unset।
उदाहरण
यह उदाहरण एक पैराग्राफ (जिसमें पृष्ठभूमि रंग है) पर ओपेसिटी लागू करता है:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; background: lightblue; height: 100vh; }
p { background: #1f13db; height: 50px; width: 100%; }
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>DOM Style opacity प्रॉपर्टी उदाहरण</h1>
<p></p>
<button onclick="addOpacity()" class="btn">ओपेसिटी जोड़ें</button>
<script>
function addOpacity() {
document.querySelector('p').style.opacity = "0.2";
}
</script>
</body>
</html>आउटपुट
"ओपेसिटी जोड़ें" बटन पर क्लिक करने पर, नीला पैराग्राफ 20% ओपेसिटी (80% पारदर्शी) हो जाता है, जिससे पृष्ठभूमि उसके माध्यम से दिखने लगती है।
महत्वपूर्ण व्यवहार
- वंशानुगत पारदर्शिता:
opacityपैरेंट पर लागू होने पर सभी बच्चे तत्वों को प्रभावित करती है। आप किसी बच्चे को पैरेंट से अधिक अपारदर्शी नहीं बना सकते। - स्टैकिंग कॉन्टेक्स्ट:
opacity < 1एक नया स्टैकिंग कॉन्टेक्स्ट बनाता है (z-index व्यवहार प्रभावित करता है)। - इवेंट्स: पूरी तरह पारदर्शी तत्व (
opacity: 0) अभी भी माउस इवेंट्स प्राप्त करते हैं (जब तक किpointer-events: noneन हो)।
opacity बनाम visibility बनाम display
| प्रॉपर्टी | दृश्यता | लेआउट स्थान | इवेंट्स | बच्चे प्रभावित? |
|---|---|---|---|---|
opacity: 0 |
अदृश्य | हाँ (स्थान लेता है) | हाँ | हाँ (वंशानुगत) |
visibility: hidden |
अदृश्य | हाँ | नहीं | नहीं (बच्चे visible हो सकते हैं) |
display: none |
हटाया गया | नहीं | नहीं | लागू नहीं |
सामान्य उपयोग के मामले
- फेड-इन/फेड-आउट एनिमेशन (
transition: opacity 0.3s)। - लोडिंग स्थिति (कंटेंट लोड होते समय धुंधला करना)।
- मॉडल/ड्रॉपडाउन बैकड्रॉप्स।
- होवर प्रभाव (थंबनेल, कार्ड)।
- कम महत्वपूर्ण UI तत्वों को डी-एम्फेसाइज़ करना।
ब्राउज़र समर्थन
सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन (IE9+)
