Question

假设我有以下HTML代码段：

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

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

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

ie：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属性。

使用jQuery将当前元素样式保存到变量

3 个答案: