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!
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
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
If you know what you want to duplicate from your stylesheet you can try this: http://jsfiddle.net/YHYQe/