如何通过给出它的id来获取元素的所有应用样式？

Question

我试图编写一个函数,它接受一个元素的Id,并给出在该元素上应用的所有样式属性(及其值)的列表.它应该考虑内联样式以及css文件中定义的样式.

当我在参数中提供样式属性名称以及元素的id时,我可以使函数工作,但我只想传递元素的id,并且应该能够获得所有样式属性以及值.

函数应该类似于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

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