Question

I need a JavaScript/jQuery way of “hijacking” a CSS definition that is not based on a class or ID.

An example CSS:

input {
    border: 1px solid red;
}

If I then have a document with, say, a <span> element in it, I’d want to add this element to this definition.

So I’d do $(this).magicAwesome(); and the red border defined in the input CSS definition would also be applied to this non-input element.

Is there a way to achieve this effect? I don’t care if it’s hackish. 🙂

Thanks a bunch in advance!

Answer 1

You can either read the computed style for a selected element, then copy that, or read the CSS declaration from the stylesheet itself. Reading stylesheets is a bit of a pain because of IE vs. Standards.

See: Dynamically add referenced stylesheet to inline styles

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

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