将 .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 = ['background', 'border', 'outline','font', 'list-style', 'padding', 'display', 'float','overflow', 'visibility', '宽度'，'高度'，'边框折叠'，'边框间距'，'标题侧'，'空单元格'，'表格布局'，'颜色'，'方向'，'字母间距' , 'line-height', 'text-align', 'text-decoration', 'text-indent', 'text-transform', 'vertical-align', 'white-space', 'word-spacing']

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

$.each(styleList, function(i, property){ 样式[属性]= 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
}