কোনও উপাদানের "ডিসপ্লে" সিএসএস সম্পত্তি পরিবর্তিত হয়েছে কিনা তা সনাক্ত করার কোনও উপায় আছে (না কেউই বা ব্লক নয় বা ইনলাইন-ব্লক ...)? যদি না, কোন প্লাগইন? ধন্যবাদ
উত্তর:
বিঃদ্রঃ
মিউটেশন ইভেন্টগুলি পোস্টটি লেখা হওয়ার পর থেকে অবহেলা করা হয়েছে এবং সমস্ত ব্রাউজার দ্বারা এটি সমর্থিত হতে পারে না। পরিবর্তে, কোনও মিউটেশন পর্যবেক্ষক ব্যবহার করুন ।
হ্যা, তুমি পারো. ডোম এল 2 ইভেন্ট মডিউলটি মিউটেশন ইভেন্টগুলি সংজ্ঞায়িত করে ; এর মধ্যে একটি - ডোম্যাটট্রোমডিফাইড হ'ল আপনার যা প্রয়োজন। মঞ্জুর, এগুলি ব্যাপকভাবে প্রয়োগ করা হয় না, তবে কমপক্ষে গেকো এবং অপেরা ব্রাউজারগুলিতে সমর্থিত।
এই লাইন বরাবর কিছু চেষ্টা করুন:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';
আপনি প্রতিস্থাপন হিসাবে আইই এর "সম্পত্তি পরিবর্তন" ইভেন্টটি ব্যবহার করার চেষ্টা করতে পারেন DOMAttrModified। এটি styleনির্ভরযোগ্যভাবে পরিবর্তনগুলি সনাক্ত করার অনুমতি দেওয়া উচিত ।
classউপাদানটির পূর্বপুরুষের বৈশিষ্ট্যটি (বা অন্য কোনও বৈশিষ্ট্য সিএসএসে উপস্থিত থাকলে অন্য কোনও বৈশিষ্ট্য পরিবর্তন করা ) উপাদানও পরিবর্তন করতে পারে, সুতরাং আপনাকে DOMAttrModifiedডকুমেন্টের মূল উপাদানটিতে সমস্ত ইভেন্ট পরিচালনা করতে হবে সবকিছু ধরা নিশ্চিত হন।
আপনি অ্যাট্রিচেঞ্জ jQuery প্লাগইন ব্যবহার করতে পারেন । প্লাগইনটির প্রধান কাজ হ'ল এইচটিএমএল উপাদানগুলির বৈশিষ্ট্য পরিবর্তনে শ্রোতার ফাংশনকে আবদ্ধ করা।
কোড নমুনা:
$("#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 এর ফাংশন ব্যবহার করতে পারেন eg if ($('node').css('display') == 'block')।
কলিন ঠিকই বলেছেন, কোনও নির্দিষ্ট সিএসএসের সম্পত্তি পরিবর্তিত হয়ে গেলে বহিস্কারের কোনও স্পষ্ট ঘটনা নেই। তবে আপনি এটিকে চারপাশে ফ্লিপ করতে এবং ডিসপ্লে সেট করে এমন কোনও ইভেন্ট ট্রিগার করতে পারবেন এবং অন্য যে কোনও কিছু করতে পারেন।
আপনার পছন্দসই আচরণ পেতে সিএসএস ক্লাস যুক্ত করার বিষয়টি বিবেচনা করুন। প্রায়শই আপনি একটি উপাদান যুক্ত উপাদানটিতে একটি শ্রেণি যুক্ত করতে পারেন এবং সমস্ত উপাদানকে প্রভাবিত করতে সিএসএস ব্যবহার করতে পারেন। আমি প্রায়শই শরীরের উপাদানগুলির উপরে একটি শ্রেণি চাপড়ান যা একটি এজ্যাক্স প্রতিক্রিয়া মুলতুবি রয়েছে তা বোঝাতে। তারপরে আমি সিএসএস সিলেক্টরদের আমার যে প্রদর্শনটি পেতে চাই তা পেতে ব্যবহার করতে পারি।
আপনি যা সন্ধান করছেন এটি এটি কিনা নিশ্চিত না।
যে বৈশিষ্ট্যগুলির জন্য সিএসএস ট্রানজিশন প্রভাবিত করবে সেগুলির জন্য ট্রানজিশন ইভেন্ট ব্যবহার করতে পারে, উদাহরণস্বরূপ জেড-ইনডেক্স:
$(".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>আপনি পারবেন না। সিএসএস "ইভেন্ট" সমর্থন করে না। সাহস আমি জিজ্ঞাসা করব আপনার কী দরকার? এখানে এই পোস্টটি দেখুন । আপনি কোনও ইভেন্টকে কোনও শৈলীর পরিবর্তনে কেন আঁকতে চান তার কোনও কারণ আমি ভাবতে পারি না। আমি এখানে ধরে নিচ্ছি যে শৈলীর পরিবর্তনটি জাভাস্ক্রিপ্টের টুকরো দিয়ে অন্য কোথাও শুরু হয়েছে। সেখানে অতিরিক্ত যুক্তি যুক্ত করবেন না কেন?