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);
}

Это показывает мне 207 свойств для каждого элемента в Chrome. Если вы применяете это ко многим элементам, это может замедлить процесс. В этом случае более быстрым подходом будет непосредственное использование правил и стилей CSS, объявленных пользовательским интерфейсом jQuery, и манипулирование только стилями, объявленными в файле css, а не всеми вычисленными стилями.

Answer 2

Вы можете перебрать все вычисленные стили для этого элемента и применить их в атрибуте стиля, а затем удалить имя класса.Или, возможно, проанализируйте правила 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.

Answer 3

В зависимости от того, какие стили вы пытаетесь применить, может работать следующее:

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');