根据不断变化的内联变量值添加类？

Question

How do we assign a class based on what an inline variable's value changes to?

Here is the demonstration which is much easier to understand: http://jsfiddle.net/eYGr5/75/

Basically, another script (I don't want to touch) is assigning an inline style to a div. I want to identify when "IF" this style's value has changed, to apply a class to a certain element.

Here is the minified non-interactive copy of the code:

HTML:

<div class="mm-active">mm-active</div>

<div class="mm-container" style="color:DarkGreen;">mm-container: By hovering here, the jQuery should look up the new inline style (DeepPink) and ONLY because of that inline style, turn mm-active lime green!</div>

CSS:

.activefix {
    background:Lime;
}

jQuery:

// This function gets the value of an inline style property, (Source: bit.ly/1er8vJ2):
(function($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

// Now how do we assign a class based on what this inline variable changes to?
if ($(".mm-container").inlineStyle("color") == 'DeepPink') {
    $('.mm-active').addClass('activefix'); // This should apply "Lime" to mm-active
}

Answer 1

IF the script that is adding the class is using jquery's .addClass() method, you should overwrite that method to add an event listener, then bind that listener to the event that is causing it to fire when .addClass is called on that event.

(function(){
 var originalAddClassMethod = jQuery.fn.addClass;
 jQuery.fn.addClass = function(){
     var result = originalAddClassMethod.apply( this, arguments );
     jQuery(this).trigger('cssClassChanged');
     return result;
 }
})();


$(function(){
 $("#Your Element To Add Handler To").bind('cssClassChanged', function(){ 
     $('.mm-active').addClass('activefix');
 });
});

Answer 2

Colour is handled differently across browsers, some may return the rgba code and some the hex (regardless fo what you assign to them). I'd shy away from checking explicit colour names, but if you really insist, you need to write a function to read rgba/hex and translate them to your HTML entities.