Eliminating CSS definition

I need a JavaScript / jQuery way to "grab" a CSS definition that is not class or ID based.

Example CSS:

input {
    border: 1px solid red;


If I have a document with, for example, an element <span>

, I would like to add that element to that definition.

So, I would do $(this).magicAwesome();

, and the red border defined in the input CSS definition will also be applied to that non-input element.

Is there a way to achieve this effect? I don't care if it hacks. :)

Thanks for a bunch in advance!


source to share

3 answers

You can either read the computed style for the selected element, copy it, or read the CSS declaration from the stylesheet itself. Reading stylesheets is a bit painful due to IE and standards.

See: Dynamically add a referenced stylesheet to inline styles





You can copy all styles from the "donor" temporary element and set them to your range: http://jsfiddle.net/UxFUr/

It does everything you need:

  • it changes the span styles to css "input" styles
  • it's called magicAwesome!
  • bonus: it hacks ...


    var donor=$('<input />').appendTo('body');


And then set a click event or something to call the function $(this).magicAwesome();

I used the getStyleObject function from CopyCss



If you know what you want to duplicate from your stylesheet you can try this: http://jsfiddle.net/YHYQe/



All Articles