jquery - 将 .css() 方法结果映射到 jquery 中的数组中

Question

在我的程序中，我尝试使用 .clone() 方法复制一个元素，但此方法不会复制元素的样式，因此我必须像这样一一翻译它们:

            var style = {
                "position":"absolute",
                "color": $(demo[i][1]).css("color"),
                "width": $(demo[i][1]).width(),
                "height": $(demo[i][1]).height(),
                "font-size": $(demo[i][1]).css("font-size"),
                "font": $(demo[i][1]).css("font"),
                "text-align": $(demo[i][1]).css("text-align"),
                "padding-left": $(demo[i][1]).css("padding-left"),
                "padding-right": $(demo[i][1]).css("padding-right"),
                "padding-top": $(demo[i][1]).css("padding-top"),
                "padding-bottom": $(demo[i][1]).css("padding-bottom"),
                }

然后使用.css方法来应用这些样式，但是将这些样式一一复制似乎是一个愚蠢的想法。那么有没有比 .clone() 方法更好的方法来复制元素，使其样式也被复制，如果没有，有没有办法自动映射所有可能的 css() 结果，而不会遇到所有这些麻烦？

<小时/>

这是我的新方法，还有更好的方法吗？

var styleList = ['背景', '边框', '轮廓', '字体', '列表样式', '填充', '显示', ' float ', '溢出', '可见性', '宽度'，'高度'，'边框折叠'，'边框间距'，'标题侧'，'空单元格'，'表格布局'，'颜色'，'方向'，'字母间距' , '行高', '文本对齐', '文本修饰', '文本缩进', '文本变换', '垂直对齐', '空白', '字间距']

var style = {'position':'absolute'}

$.each( styleList, 函数(i, 属性){ 样式[属性]=original.css(属性)});

Answer 1

这是一个很好的例子，说明了为什么应该使用 CSS 类而不是直接使用样式。

如果将所有内容放入 CSS 类中，那么您所要做的就是在克隆元素上调用 addClass() 方法。我还没有测试过它，但我希望您会发现在克隆元素时实际上会复制它，因此您不必这样做。

回复评论:

您的网站应该有与代码分开的演示。如果您正在努力处理继承的属性，那么您可能需要查看网站的设计。将所有表现形式分离到 CSS 中是一个很好的做法。

此外，要检查元素是否具有类，请使用 hasClass() 函数。不需要拆分属性然后迭代数组，因此，

var classList = $('#divId').attr('class').split(' '); 
$.each( classList, function(index, item){ 
    if (item==='someClass') { //do something } 
}); 

变成:

if ($('#divId').hasClass('someClass')){
    //do something
}