क्या यह पता लगाने का एक तरीका है कि किसी तत्व की "प्रदर्शन" सीएसएस संपत्ति को बदल दिया जाता है (क्या कोई नहीं या ब्लॉक या इनलाइन-ब्लॉक ...)? यदि नहीं, तो कोई प्लगइन? धन्यवाद
क्या यह पता लगाने का एक तरीका है कि किसी तत्व की "प्रदर्शन" सीएसएस संपत्ति को बदल दिया जाता है (क्या कोई नहीं या ब्लॉक या इनलाइन-ब्लॉक ...)? यदि नहीं, तो कोई प्लगइन? धन्यवाद
जवाबों:
ध्यान दें
इस पोस्ट के लिखे जाने के बाद से उत्परिवर्तन घटनाओं को हटा दिया गया है, और सभी ब्राउज़रों द्वारा समर्थित नहीं किया जा सकता है। इसके बजाय, एक उत्परिवर्तन पर्यवेक्षक का उपयोग करें ।
हाँ तुम कर सकते हो। DOM L2 इवेंट मॉड्यूल म्यूटेशन ईवेंट को परिभाषित करता है ; उनमें से एक - DOMAttrModified वह है जिसकी आपको आवश्यकता है। दी गई, ये व्यापक रूप से लागू नहीं हैं, लेकिन कम से कम गेको और ओपेरा ब्राउज़रों में समर्थित हैं।
इन पंक्तियों के साथ कुछ आज़माएँ:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';आप प्रतिस्थापन के रूप में IE के "प्रॉपर्टीचेंज" इवेंट का उपयोग करने का भी प्रयास कर सकते हैं DOMAttrModified। इसे styleमज़बूती से परिवर्तनों का पता लगाने की अनुमति देनी चाहिए ।
classतत्व के पूर्वज की विशेषता (या किसी अन्य विशेषता यदि विशेषता चयनकर्ता CSS में मौजूद है) को बदलना भी तत्व को बदल सकता है, इसलिए आपको DOMAttrModifiedदस्तावेज़ रूट तत्व पर सभी घटनाओं को संभालना होगा सब कुछ पकड़ने के लिए सुनिश्चित हो।
आप attrchange jQuery प्लगइन का उपयोग कर सकते हैं । प्लगइन का मुख्य कार्य HTML तत्वों के विशेषता परिवर्तन पर एक श्रोता फ़ंक्शन को बांधना है।
कोड नमूना:
$("#myDiv").attrchange({
trackValues: true, // set to true so that the event object is updated with old & new values
callback: function(evnt) {
if(evnt.attributeName == "display") { // which attribute you want to watch for changes
if(evnt.newValue.search(/inline/i) == -1) {
// your code to execute goes here...
}
}
}
});आप cssसीएसएस गुणों का परीक्षण करने के लिए jQuery के फ़ंक्शन का उपयोग कर सकते हैं , जैसे। if ($('node').css('display') == 'block')।
कॉलिन सही है, कि कोई स्पष्ट घटना नहीं है जो विशिष्ट सीएसएस संपत्ति बदल जाने पर निकाल दी जाती है। लेकिन आप इसे इधर-उधर करने में सक्षम हो सकते हैं, और एक घटना को ट्रिगर कर सकते हैं जो डिस्प्ले सेट करता है, और जो कुछ भी।
अपने इच्छित व्यवहार को प्राप्त करने के लिए CSS कक्षाओं को जोड़ने का उपयोग करने पर भी विचार करें। अक्सर आप किसी वर्ग को एक तत्व में जोड़ सकते हैं, और सभी तत्वों को प्रभावित करने के लिए CSS का उपयोग कर सकते हैं। मैं अक्सर इंगित करने के लिए कि AJAX प्रतिक्रिया लंबित है, शरीर के तत्व पर एक वर्ग को थप्पड़ मारता है। तब मैं अपनी पसंद का प्रदर्शन पाने के लिए CSS चयनकर्ताओं का उपयोग कर सकता हूं।
यकीन नहीं होता कि यह वही है जो आप खोज रहे हैं।
ऐसे गुण जिनके लिए सीएसएस संक्रमण को प्रभावित करेगा, ट्रांज़ेंडेंड इवेंट का उपयोग कर सकते हैं, उदाहरण के लिए z-index:
$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
console.log("end", e);
alert("z-index changed");
});
$(".changeButton").on("click", function() {
console.log("click");
document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});.observed-element {
transition: z-index 1ms;
-webkit-transition: z-index 1ms;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>आप नहीं कर सकते। CSS "घटनाओं" का समर्थन नहीं करता है। हिम्मत मैं पूछता हूँ कि आपको इसके लिए क्या चाहिए? इस पोस्ट को यहाँ एसओ पर देखें। मैं एक ऐसे कारण के बारे में नहीं सोच सकता कि आप किसी घटना को स्टाइल में बदलाव करना क्यों चाहते हैं। मैं यहाँ मान रहा हूँ कि शैली परिवर्तन को किसी और जगह जावास्क्रिप्ट द्वारा ट्रिगर किया गया है। वहां अतिरिक्त तर्क क्यों नहीं जोड़ते?