Copy CSS from one class to another with JQuery?

Question

Hi,

I would like to make a timepicker similar to the datepicker, conforming to the current UI Theme. Can I copy, or somehow inherit, the CSS properties from datepicker to my timepicker? I do'nt want to copy the behaviour of the class, just the CSS props.

(I've seen other timepickers out there, but I'm not really happy with any of them...)

Answer 1

This is difficult to do as CSS and HTML markup (and javascript code) are very tightly coupled together. Also the CSS requires some images (usually a big one with tens of images - css selects which portion of the big image is to be shown).

In order to inherit the css, you need also to inherit the class names and use the same in your datepicker. The datepicker has dependencies also to the core jquery.ui.css and not just the datepicker.css. So, you need to also take this into account.

Answer 2

You could use jQuery to read all the required values, setting them as variables on the way:

var color = $(this).css("background-color");
var padding = $(this).css("padding");

Etc etc...

Then output them via:

$(this).css({'background-color' : color+'px', 'padding' : padding+'px'});

Does that make sense, it's not really copying the stylesheet, but it is reading the sections are appending them to another element...

Best of luck.