javascript - How to get all the applied styles of an element by just giving its id? - Stack Overflow

admin管理员组

文章数量:1180551

I was trying to write a function which takes the Id of an element and gives the list of all the style attributes(with their values) applied on that element. It should consider the inline style as well as the style defined in css file.

I could get the function work when I provide style attribute name along with the id of the element in parameter but I just want to pass the id of the element and should be able to get all the style attributes along with values.

function should be something like getStyleById(elementId);

PFB the code snippet so far:

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

I was trying to write a function which takes the Id of an element and gives the list of all the style attributes(with their values) applied on that element. It should consider the inline style as well as the style defined in css file.

I could get the function work when I provide style attribute name along with the id of the element in parameter but I just want to pass the id of the element and should be able to get all the style attributes along with values.

function should be something like getStyleById(elementId);

PFB the code snippet so far:

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

• javascript
• html
• css

Share Improve this question Follow edited Sep 2, 2021 at 14:11 Lee Taylor 7,9741616 gold badges3737 silver badges5353 bronze badges asked Feb 24, 2012 at 12:19 manishekhawatmanishekhawat 70933 gold badges1212 silver badges1818 bronze badges 4

• I don't think you mentioned what's not working – Liviu T. Commented Feb 24, 2012 at 12:38
• 2 Check this answer – Alexander Pavlov Commented Feb 24, 2012 at 12:39
• Perhaps this will help - stackoverflow.com/questions/5509830/… – Sean Carruthers Commented Feb 24, 2012 at 12:50
• @LiviuT. I could get the function work when I provide style attribute name along with the id of the element in parameter but I just want to pass the id of the element and should be able to get all the style attributes along with values. – manishekhawat Commented Feb 24, 2012 at 13:21

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 27

Use the following method:

• Loop through the indexes of the CSSStyleDeclaration object (getComputedStyle) to get each known property name. Use getPropertyValue + this name to get the value.
  Code optimalization: Do not use getComputedStyle for each iteration, but store it in a variable outside the loop.
• Use an ordinary for ( name in object ) loop for currentStyle.
• Use the same looping method for inline styles

Code:

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

To get applied styles: use document.querySelector('#notion-app').getAttribute('style').
This will return as a string: "width: 1280px; max-width: 1280px; align-self: center; margin-top: 1px; margin-bottom: 1px;".
You can further break it into array by using .split(';').

---

To get computed styles (styles which get applied eventually):
window.getComputedStyle(document.querySelector('#notion-app'))).cssText

本文标签： javascriptHow to get all the applied styles of an element by just giving its idStack Overflow