JQuery如何将类css数据设置为div但不设置类名或其他类名

Question

我需要将一个类数据复制到一个div，但没有设置类名或其他类名。

例如：

$('#blabla').addClass('xxx');

然后删除类名但留下样式数据。问题是我需要设置样式信息，但我无法设置类名，因为它与其他一些代码冲突。

Answer 1

使用getComputedStyle 获取应用于对象的所有样式。请注意，这可能是一个非常大的列表。

var sourceDiv = $('#source');
var targetDiv = $('#target');

// IE 6,7,8 doesn't support this. Google how to make this cross-browser
var styles = window.getComputedStyle(sourceDiv.get(0), null);
var property, value;

for(var i = 0; i < styles.length; i++) {
    name = styles[i];
    value = sourceDiv.css(name);
    targetDiv.css(name, value);
}

这显示了 Chrome 上每个元素的 207 个属性。如果您将此应用于很多元素，它可能会减慢速度。在这种情况下，一种更快的方法是直接利用 jQuery UI 声明的 CSS 规则和样式，并且只操作在 css 文件中声明的样式，而不是整个计算的样式。

Answer 2

根据您尝试应用的样式，可以执行以下操作：

1. addClass()
2. 从您的元素中获取 CSS 属性并使用 css() 方法应用它们
3. removeClass()

代码：

var blabla = $('#blabla');
blabla.addClass('xxx');
blabla.css({
    fontWeight: blabla.css('fontWeight'),
    display: blabla.css('display'),
    float: blabla.css('float'),
});
blabla.removeClass('xxx');

Answer 3

您可以遍历该元素的所有计算样式并将它们应用到样式属性中，然后删除类名。或者也许解析 CSS 规则并以这种方式应用来自 .xxx 的样式。

您可以像这样遍历所有 CSS 属性：

var elem = $('#blabla')[0],list = {},props;
if (document.defaultView && document.defaultView.getComputedStyle) {
    props = document.defaultView.getComputedStyle(elem, "");
    $.each(props, function(i, prop) {
        list[prop] = props.getPropertyValue(prop);
    });
} else if (elem.currentStyle) { // IE
    props = elem.currentStyle;
    $.each(props, function(prop, val) {
        list[prop] = val;
    });
}

console.log(list) // the entire computed style object

如果您这样做，您还将获得所有继承和计算的样式，甚至来自浏览器 CSS。