将CSS属性继承/扩展到其他元素
jQuery中用于将CSS属性从一个元素扩展/继承到另一个元素的最有效方法是什么?
期望的效果
$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });
#me
现在拥有的所有的CSS #blah
还background
CSS:
#blah {
padding: 5px;
width: 200px;
height: 20px;
border: 1px solid #333;
font-family: "Verdana";
}
#me {
position: absolute;
left: 5px;
top: 5px;
}
<div id="blah"></div>
<div id="me">test</div>
编辑:这将用于插件,所以使用类,只是做.addClass
不是一个选项
我正在寻找与设置插件选项的默认值相同的效果,但是对于CSS:
$.extend([css object], [#blah css object], [#me css object])
$('#me').addClass('class');
这工作,不知道你是否可以使用相对于ID的CSS。
尝试这个。
function CloneStyle(sourceID, targetID){
var myStyle;
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
if (window.getComputedStyle) {
myStyle = window.getComputedStyle(source).cssText;
}
else if (source.currentStyle) {
myStyle = $.extend(true, {}, source.currentStyle);
} else {
throw "antique browser!";
}
target.style.cssText = myStyle;
}
现在打电话来。
CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });
小提琴在这里:http://jsfiddle.net/naveen/3FdDp/
如果您要使用CSS类而不是ID引用,则可以执行以下操作:
$("#me").addClass($("#blah").attr("class"));
这将从#blah
复制到#me
类