劫持CSS定义

Question

我需要一种JavaScript/jQuery的方式来“劫持”CSS定义，而不是基于类或ID。

示例CSS：

input {
    border: 1px solid red;
}

如果我有一个文档，假设文档中有一个<span>元素，我想把这个元素添加到这个定义中。

所以我使用$(this).magicAwesome();，input CSS定义中定义的红色边框也将应用于这个非输入元素。

有没有办法达到这个效果？我不管这是不是黑客。:)

提前感谢大家！

Answer 1

您可以读取选定元素的计算样式，然后复制该样式，或者从样式表本身读取CSS声明。阅读样式表是一种痛苦，因为IE与标准。

请参阅：Dynamically add referenced stylesheet to inline styles

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

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

Answer 2

你可以从一个临时的“供体”元素中复制所有的样式并将它们设置为你的跨度：http://jsfiddle.net/UxFUr/

它能做你想做的一切：

input it将跨度的样式更改为“input”的css样式它被命名为magicAwesome!

• bonus: it's
• ...

代码：

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

然后设置一个单击事件或其他事件来触发函数$(this).magicAwesome();

我使用了CopyCss中的getStyleObject函数

Answer 3

如果您知道要从样式表复制什么，可以尝试这样做：http://jsfiddle.net/YHYQe/