劫持CSS定义

Question

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

CSS示例：

input {
    border: 1px solid red;
}

如果我的文档中包含一个<span>元素，我想将此元素添加到此定义中。

所以我做$(this).magicAwesome();并且输入CSS定义中定义的红色边框也将应用于此非输入元素。

有没有办法达到这个效果？我不在乎它是否是hackish。 ：）

提前感谢一大堆！

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

您可以复制临时捐赠者的所有款式＆＃39;元素并将它们设置为您的范围：http://jsfiddle.net/UxFUr/

它可以做你想做的一切：

• 它将span的样式更改为＆＃34; input＆＃34;
的css样式
• 它名为magicAwesome！
• 奖励：它是hackish ......

代码：

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

然后设置点击事件或其他内容以触发函数$(this).magicAwesome();

我使用了来自CopyCss

的getStyleObject函数

Answer 3

如果您知道要从样式表中复制的内容，可以尝试以下操作：http://jsfiddle.net/YHYQe/