使用jQuery将当前元素样式保存到变量中[重复]

Question

假设我有以下 HTML sn-p:

<style>
#testSubject{
  color: red;
  width: 200px;
}
</style>

<p id="testSubject">Hello, world!</p>

使用 jQuery / vanilla JS，有没有办法将元素当前活动的样式保存到变量中，以便以后可以恢复/使用？

即：var testSubjectStyles = $('#testSubject').css('*');

现在我有了变量testSubjectStyles，并且可以将这些样式应用于任何元素。

可以这样做吗？我一直在玩 jQuery 的.css()，但这似乎只能让你设置样式。

Answer 1

您可以使用var yourvar=element.css(); 来获取包含所有元素特定标准标记的对象。如果您还需要供应商标记，请查看这个更复杂的解决方案：

Taken from Here

function getStyleObject(stobj){
        var dom = stobj.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return stobj.css();
    }

那就用var yourstyle=getStyleObject(source);

Answer 2

假设您必须获取一个元素的背景颜色并将其应用于另一个元素

var testSubjectStyles = $('#testSubject').css('backgroundColor');
$("#anotherelement").css('backgroundColor',testSubjectStyles);

希望这会有所帮助！

Answer 3

你可以用 JavaScript 来做，你不需要使用 jQuery。

var testSubjectStyles = $('#textSubject')[0].style;

这将为您提供一个完整的 CSSStyleDeclaration 对象，其中包括该元素的所有 css 属性。