تحديد التغييرات في ارتفاع DIV أو سمات CSS

عند العمل مع صفحات الويب، غالبًا ما يكون من الضروري تتبع التغييرات في الارتفاع أو CSS الأخرى صفات العناصر. يوفر jQuery خيارات متنوعة لتلبية هذه الحاجة.

تتبع الأحداث باستخدام 'change()':

بينما يتم استخدام الحدث 'change()' بشكل أساسي لعناصر الإدخال ويمكن تخصيصه لاكتشاف تغييرات CSS. ومع ذلك، يتضمن هذا الأسلوب فحص خصائص CSS للعنصر بشكل دوري وتشغيل حدث إذا كانت تختلف عن القيم السابقة:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

ربط حدث مخصص باستخدام 'bind()':

يتضمن الحل الأكثر فعالية إنشاء حدث مخصص وربطه بالعنصر المطلوب:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});    

في هذه الحالة، نقوم بتشغيل الحدث 'heightChange' كلما تم تغيير ارتفاع div 'mainContent'.

ملاحظة:

• يمكن تعديل تكرار عمليات التحقق في وظيفة 'checkForChanges()' لتناسب متطلبات محددة.
• إن 'bind()' و تم توثيق أساليب 'trigger()' جيدًا في وثائق jQuery لمزيد من المرجع.