Подтвердить что ты не робот

Как получить все прикладные стили элемента, просто указав свой идентификатор?

Я пытался написать функцию, которая принимает идентификатор элемента и дает список всех атрибутов стиля (с их значениями), применяемых к этому элементу. Он должен учитывать стиль inline, а также стиль, определенный в файле css.

Я мог бы заставить эту функцию работать, когда я предоставляю имя атрибута стиля вместе с идентификатором элемента в параметре, но я просто хочу передать идентификатор элемента и должен иметь возможность получить все атрибуты стиля вместе со значениями.

Функция

должна быть чем-то вроде getStyleById (elementId);

PFB фрагмент кода:

var styleNode = [];
    var styles;
    var sty = x.style;

    var len = sty.length;

    for (var i = 0; i < len; i++) {
        styles = sty.item(i);

        if (x.currentStyle)     //IE for External/Global Styles
        {
            var a = x.currentStyle[styles];

            styleNode.push(styles + ":" + a);
        }
        else if (document.defaultView && document.defaultView.getComputedStyle)    //Firefox,Chrome,Safari for External/Global Styles
        {
            var b = document.defaultView.getComputedStyle(x, "").getPropertyValue(styles);

            styleNode.push(styles + ":" + b);
        }
        else           //Works in Inline Styles only
        {
            var c = x.style[styles];

            styleNode.push(styles + ":" + c);
        }
    }

Любая помощь будет оценена.

Привет,

manishekhawat

4b9b3361

ОТВЕТЫ

Ответ 1

Используйте следующий метод:

  • Проведите через индексы объекта CSSStyleDeclaration (getComputedStyle), чтобы получить каждое известное имя свойства. Используйте getPropertyValue + это имя, чтобы получить значение.
    Оптимизация кода: не используйте getComputedStyle для каждой итерации, но храните ее в переменной вне цикла.
  • Используйте обычный цикл for ( name in object ) для currentStyle.
  • Использовать тот же метод цикла для встроенных стилей

код:

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}