Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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);     } } 
like image 708
manishekhawat Avatar asked Feb 24 '12 12:02

manishekhawat


People also ask

How do I select all elements by ID?

Use the document. querySelectorAll() method to get all elements whose id starts with a specific string, e.g. document. querySelectorAll('[id^="box"]') . The method returns a NodeList containing all the elements that match the provided selector.

How will you retrieve an element with the ID?

The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.

How do you find the style of an element?

First, you need to select the element with querySelector . Then, you use getComputedStyle to get the element's styles. If you log style , you should see an object that contains every CSS property and their respective values. You can also see this object in Chrome's and Firefox's dev tools.

How do you get all of the CSS properties of an element in JavaScript?

The CSS of an element can be obtained using the getComputedStyle element function in JavaScript. It returns a JavaScript object containing CSS properties and their values. This object is indexed and iterable over the property names. The getPropertyValue(property) is used to get the value of a property.


1 Answers

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; } 
like image 143
Rob W Avatar answered Jan 26 '23 01:01

Rob W