How can I get a list of all inline-styles?

Question

There's an easy way to find all current attributes on an HTMLElement using el.attributes, but I can't find an equivalent for inline-styles. I've tried seeing if anyone else ran into this problem but there seems to be no relative results.

Doing something like this I was able to find all possible styles, but it also included all the functions and irrelevant data.

for( var style in el.style ){ 
    console.log(el.style[style]); 
}

This is a very wasteful computation for a loop that can be as large as 300+ iterations with a potential of 100% of the inline-styles not actually set to anything. Is there a better way?

http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — , Jan 13 '16 at 22:20
Ah, I wasn't using Jquery. Sorry about the confusing dollar sign. $0 is a chrome dev-tool functionality that allows you to work with the currently selected element in the console. — Andrew, Jan 13 '16 at 22:22
@PhilAndelhofs looks like it's hidden in there. Though, there are multiple small distinctions between my question and that question and my questions is more specific about just the inline-styles. — Andrew, Jan 13 '16 at 22:25

score 1 · Accepted Answer · edited Dec 04 '17 at 22:43

1

Note: I did have the answer before posting this question, but I was going to ask it anyways and think it would be helpful to other people

The style object returned by nodes has a length property which is the number of currently defined inline-styles. You can use this property to loop over the style object as an array-like structure and each index returns the name that is defined.

Example:

for (var i = 0, l = el.style.length; i < l; i++){
    console.log(el.style[i]); // an active inline-style
}

edited Dec 04 '17 at 22:43

inorganik

24,255
17
90
114

answered Jan 13 '16 at 22:19

Andrew

3,393
4
25
43

1

Yes it is helpful i think ^^ – Jan 13 '16 at 22:24
`el.style.map((x,y) => console.log(x));` – Sterling Archer Jan 13 '16 at 22:34
1

Oops, lemme remedy with some more ES6! `Array.from(el.style).map((x,y) => console.log(x));` – Sterling Archer Jan 13 '16 at 22:41
@SterlingArcher works much nicer! Thank you :). I'm still doing old-school js haha. Learning the quirks of ES6 is my next project. – Andrew Jan 13 '16 at 22:43
1

Come to the JS chat room if you need help. Lotta pros in there – Sterling Archer Jan 13 '16 at 22:44
@SterlingArcher I'll take your word! Aren't chat-rooms getting removed from stack in the future though? – Andrew Jan 13 '16 at 22:46
thanks. but you have an error in you code is "el.style" not "el.styles" .. without final 's' – Doua Beri Oct 06 '16 at 21:56
@Doua Beri, I believe this code is directly from a working snippet. What are you testing with? – Andrew Oct 07 '16 at 23:25
@FreddyJones "for( var i = 0, l = el.styles.length; " there is no el.styles ; the code works great with "el.style" tested with firefox and chrome – Doua Beri Oct 09 '16 at 22:57
For a more complete answer, check my solution below. – Apr 02 '20 at 22:14

score 1 · Answer 2 · answered Jun 23 '21 at 14:58

If you only need an array of set inline CSS properties, you can simply convert the style of the element to an array with spread syntax or Array.from.

function getInlineStyleProperties(elem){
  return [...elem.style];
}
console.log(getInlineStyleProperties(document.querySelector('div')));

<div style="height: 20px; color: red;"></div>

To get an object mapping the set properties to their values, you can convert the style of the element to an array with spread syntax to get all the set properties, map over it to create an array of key-value pairs, and use Object.fromEntries to convert it to an object.

function getInlineStyles(elem){
  return Object.fromEntries([...elem.style].map(x => [x, elem.style[x]]));
}
console.log(getInlineStyles(document.querySelector('div')));

<div style="height: 20px; color: red;"></div>

score 0 · Answer 3 · answered Apr 02 '20 at 22:14

The modern way of doing it is this:

function getInlineStyle (element) {
  return Array.from(element.style).reduce((style, name) => {
    style[name] = element.style[name]
    return style
  }, {})
}

const div = document.getElementById('foo')
console.log(getInlineStyle(div))

<div id="foo" style="width: 100px; margin-top: 10px;"></div>

How can I get a list of all inline-styles?

3 Answers3