What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?

Desired effect

$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });

#me will now have all the CSS of #blah and also background

CSS:

#blah {
    padding: 5px;
    width: 200px;
    height: 20px;
    border: 1px solid #333;
    font-family: "Verdana";
}

#me {
    position: absolute;
    left: 5px;
    top: 5px;
}

<div id="blah"></div>
<div id="me">test</div>

Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option

I'm looking for the same effect as setting default value for plugin options, but instead for CSS:

$.extend([css object], [#blah css object], [#me css object])

What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?

Desired effect

$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });

#me will now have all the CSS of #blah and also background

CSS:

#blah {
    padding: 5px;
    width: 200px;
    height: 20px;
    border: 1px solid #333;
    font-family: "Verdana";
}

#me {
    position: absolute;
    left: 5px;
    top: 5px;
}

<div id="blah"></div>
<div id="me">test</div>

Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option

I'm looking for the same effect as setting default value for plugin options, but instead for CSS:

$.extend([css object], [#blah css object], [#me css object])

• javascript
• jquery
• html
• css

• Can't you just in your CSS change #blah to .blaClass, and then add .blaClass to #me with .addClass()? – thirtydot Commented Jun 8, 2011 at 10:54
• Given that the CSS model in jQuery is being derived from the DOM not the CSS file your method would override padding, width, height, border and font-family... position, left, top, right, bottom, etc. You see my point. If I want more than one element to share CSS properties the I tend to use a CSS class, i.e. .monCSS rather than assigning by ID. Then you can use addClass. – Lazarus Commented Jun 8, 2011 at 10:55
• .addClass isn't possible as it's used on sites that I have no control over. It's for use in a general plugin/script across multiple sites. – Gary Green Commented Jun 8, 2011 at 10:57
• @Lazarus, I see, so what your saying is there's no way of knowing what CSS properties where set in the file as all CSS properties exist and have a value set? I was hoping for functionality just like when setting default plugin options; $.extend([css object], [#blah css object], [#me css object]) – Gary Green Commented Jun 8, 2011 at 11:02
• @Gary Green: I'm fairly sure what you're asking for is possible. For example, the second answer on this similar question looks hopeful: stackoverflow./questions/754607/… – thirtydot Commented Jun 8, 2011 at 11:08

3 Answers 3

$('#me').addClass('class');

This works, not sure if you can use the css relative to an ID though.

Try this.

function CloneStyle(sourceID, targetID){
    var myStyle;
    var source = document.getElementById(sourceID);
    var target = document.getElementById(targetID);
    if (window.getComputedStyle) {
        myStyle = window.getComputedStyle(source).cssText;
    }
    else if (source.currentStyle) {
        myStyle = $.extend(true, {}, source.currentStyle);
    } else {
        throw "antique browser!";
    }
    target.style.cssText = myStyle;
}

Now call like.

CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });

Fiddle here: http://jsfiddle/naveen/3FdDp/

If you were to use CSS classes rather than ID references you could do the following:

$("#me").addClass($("#blah").attr("class"));

Which would copy the classes from #blah to #me