jQuery के साथ सीएसएस संपत्ति में बदलाव के लिए घटना का पता लगाना

वेब विकास के दायरे में, किसी तत्व के सीएसएस गुणों में बदलाव का पता लगाया जा सकता है गतिशील अद्यतन लागू करने के लिए महत्वपूर्ण। JQuery के साथ, आप "डिस्प्ले" जैसे सीएसएस गुणों में परिवर्तनों की प्रभावी ढंग से निगरानी और प्रतिक्रिया करने के लिए DOM ईवेंट की शक्ति का लाभ उठा सकते हैं।

DOMAttrModified इवेंट का उपयोग करना

ब्राउज़र DOM म्यूटेशन इवेंट के लिए समर्थन प्रदान करते हैं, जिसमें DOMAttrModified इवेंट शामिल है। यह ईवेंट विशेष रूप से आपको सूचित करने के लिए डिज़ाइन किया गया है जब किसी तत्व की विशेषताओं को संशोधित किया जाता है, जिसमें इनलाइन या बाहरी स्टाइलशीट के माध्यम से परिभाषित सीएसएस गुण शामिल हैं।

DOMAttrModified इवेंट का उपयोग करने के लिए, आप jQuery का उपयोग कर सकते हैं on() फ़ंक्शन, जैसा दिखाया गया है नीचे:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

इस उदाहरण में, हम एक ईवेंट श्रोता को document.documentElement तत्व से जोड़ते हैं, जो दस्तावेज़ के मूल का प्रतिनिधित्व करता है। जब एक स्टाइल विशेषता (जैसे कि "डिस्प्ले") को संशोधित किया जाता है, तो यह ईवेंट हैंडलर ट्रिगर हो जाता है, जिससे आप संशोधित विशेषता के पिछले और वर्तमान मानों तक पहुंच प्राप्त कर सकते हैं।

IE के "प्रॉपर्टीचेंज" इवेंट का लाभ उठाना

पुराने ब्राउज़रों के लिए जो DOMAttrModified का समर्थन नहीं करते हैं, आप इंटरनेट एक्सप्लोरर के स्वामित्व का उपयोग कर सकते हैं "संपत्ति परिवर्तन" घटना एक फ़ॉलबैक के रूप में। हालांकि यह इवेंट विशेष रूप से IE द्वारा समर्थित है, यह उन वातावरणों में शैली परिवर्तनों का पता लगाने के लिए एक विश्वसनीय तरीका प्रदान कर सकता है।

"propertychange" इवेंट का उपयोग करने के लिए, आप jQuery के को नियोजित कर सकते हैं on() फ़ंक्शन एक स्ट्रिंग तर्क के साथ, जैसा कि निम्नलिखित में देखा गया है उदाहरण:

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

उत्परिवर्तन पर्यवेक्षकों पर नोट

हालांकि उपरोक्त तकनीकें अतीत में सीएसएस संपत्ति परिवर्तनों का पता लगाने के लिए सामान्य दृष्टिकोण थीं, नए ब्राउज़र म्यूटेशन ऑब्जर्वर का उपयोग करने की सलाह देते हैं, जो परिवर्तनों के लिए विशिष्ट DOM तत्वों की निगरानी के लिए अधिक मानकीकृत और सुव्यवस्थित तंत्र प्रदान करते हैं।