Clever Geek Handbook

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!

+3


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



http://www.javascriptkit.com/domref/stylesheet.shtml

https://developer.mozilla.org/en/DOM/document.styleSheets

+4


source


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 ...

code:



$.fn.magicAwesome=function(){
    var donor=$('<input />').appendTo('body');
    $(this).css(donor.getStyleObject());
    donor.remove();
}

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

I used the getStyleObject function from CopyCss

+1


source


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

0


source






More articles:


All Articles