Menu
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); } } 
708
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.
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.
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.
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.
Use the following method:
CSSStyleDeclaration object (getComputedStyle) to get each known property name. Use getPropertyValue + this name to get the value.getComputedStyle for each iteration, but store it in a variable outside the loop.for ( name in object ) loop for currentStyle.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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
