Any ways to detect CSS changing?

Question

I have this tags:

<div>
   <h1>
   </h1>
</div>

Then I have a javascript lib that changes font-size of the <div> tag, but <h1> has its own CSS. Then text in <h1> does not change. I just want resizing font-size of <div> affecting <h1>. I cannot change the javascript lib nor the html structure. So, I think that it would be good to have something like

$('div').bind('css-change', function (){ 
    $('h1').css('fontSize',$('div')Text.css('fontSize'));
})

Any ways to have something like .bind('css-change') ?

Possible duplicate: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery — js-coder, Jan 11 '12 at 12:41
Simply having a static `h1 {font-size:1em}` in the stylesheet won't work? — Mr Lister, Jan 11 '12 at 12:53
As @dotweb said , this is duplicated http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery . And the answer is in there. — Surasin Tancharoen, Jul 24 '12 at 13:32

score 1 · Answer 1 · answered Jan 11 '12 at 12:40

1

Afaik there is no event that is triggered on css change... Why not change the css of the <h1> via JS and set it to inherit the font-size?

$('h1').css('fontSize','inherit');

answered Jan 11 '12 at 12:40

Constantin Groß

10,719
4
24
50

Kinda help, but it does not completely help. The thing is that I still need the initial 'font-size' of H1 as 'default' font-size. If div is being resized, h1 will can have 'inherit', but not before that. – Surasin Tancharoen Jan 11 '12 at 15:00
So, I presume there is a function that does the resizing (or at least a kind of "onresize event" if resizing is triggered by the user) - can't you just set the font-size to inherit as soon as this function/event is being executed? – Constantin Groß Jan 11 '12 at 15:20
sorry for late reply, we thought about that too. Unfortunately my team don't want to edit 3rd-party code (in case we have to update it in future). So, if you know how to 'hook' to particular method like the concept of aspect programming, that would be perfect. – Surasin Tancharoen Jan 13 '12 at 08:59
@SurasinTancharoen could you name that 3rd party plugin please? – Constantin Groß Jan 13 '12 at 09:06

score 0 · Answer 2 · answered Jan 11 '12 at 12:42

0

jQuery has implemented in version 1.4.3: cssHooks

$.cssHooks["someCSSProp"] = {
    get: function( elem, computed, extra ) {
      // handle getting the CSS property
    },
    set: function( elem, value ) {
      // handle setting the CSS value
    }
};

answered Jan 11 '12 at 12:42

Armin

15,582
10
47
64

Hi Armin, I fear that either this is not helpful in this context, or I misunderstood the use of cssHooks... :) – Constantin Groß Jan 11 '12 at 12:47
No, you are right! This isn't helpful in this context! I have misunderstood the question. – Armin Jan 11 '12 at 12:52

Any ways to detect CSS changing?

2 Answers2