اكتشاف الأحداث لتغييرات خصائص CSS باستخدام jQuery

في مجال تطوير الويب، يمكن اكتشاف التعديلات على خصائص CSS لعنصر ما حاسمة لتنفيذ التحديثات الديناميكية. باستخدام jQuery، يمكنك الاستفادة من قوة أحداث DOM لمراقبة التغييرات في خصائص CSS والاستجابة لها بشكل فعال، مثل "display". توفر المتصفحات الدعم لأحداث طفرة DOM، والتي تتضمن الحدث

. تم تصميم هذا الحدث خصيصًا لإعلامك عند تعديل سمات عنصر ما، بما في ذلك خصائص CSS المحددة في السطر أو من خلال أوراق الأنماط الخارجية.لاستغلال الحدث

، يمكنك الاستفادة من [ jQuery's &&&]on() الدالة، كما هو موضح أدناه:

document.documentElement.addEventListener('DOMAttrModified', function(e){ إذا (e.attrName === 'style') { console.log('prevValue: ' e.prevValue, 'newValue: ' e.newValue); } }، خطأ شنيع)؛ document.documentElement.style.display = 'block';في هذا المثال، قمنا بإرفاق مستمع الحدث إلى عنصر document.documentElement، الذي يمثل جذر المستند. عندما يتم تعديل سمة نمط (مثل "العرض")، يتم تشغيل معالج الحدث هذا، مما يسمح لك بالوصول إلى القيم السابقة والحالية للسمة المعدلة.

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

"propertychange" كحدث احتياطي. على الرغم من أن هذا الحدث مدعوم بشكل خاص بواسطة IE، إلا أنه يمكن أن يوفر طريقة موثوقة لاكتشاف تغييرات النمط في تلك البيئات.

"propertychange"، يمكنك استخدام الخاص بـ jQuery. on() الدالة مع وسيطة سلسلة، كما هو موضح في ما يلي مثال:

document.documentElement.on('propertychange', function(e){ إذا (e.propertyName === 'عرض') { console.log('prevValue: ' e.prevValue, 'newValue: ' e.newValue); } }، خطأ شنيع)؛ document.documentElement.style.display = 'block';ملاحظة حول مراقبي الطفرات

في حين أن التقنيات المذكورة أعلاه كانت من الأساليب الشائعة لاكتشاف تغييرات خصائص CSS في الماضي، توصي المتصفحات الأحدث باستخدام Mutation Observers، والتي توفر آلية أكثر توحيدًا وانسيابية لمراقبة عناصر DOM محددة للتغييرات.