Как получить стили элемента с jQuery?

· jQuery и Снипеты · 2 мин чтения

В этой записи я покажу простой пример того как можно забрать стили у нужного вам элемента.

Код

function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css

]);
}
}
} else if (typeof css == «string») {
css = css.split(«; «);
for (var i in css) {
var l = css[i].split(«: «);
s[l[0].toLowerCase()] = (l[1]);
}
}
return s;
}

Далее, вам нужно добавить элемент в функцию css(), как показано на примере ниже:

var $styles = css($("#element"));

В примере выше, мы забрали стили из элемента с id element и теперь можем использовать переменную $styles, чтобы переместить их к другому элементу.

Вот как это все будет выглядеть:

var $style = css($("#element"));
$("#elementSpecial").css($style);

Теперь элемент #elementSpecial будет включать в себя такие же стили, что и в #element.