3

I want to get all the styles which has been set dynamically (which applies as inline-styles) on an element.

For example

<span class="text" style="color: rgb(128, 128, 255); font-size: 24px;">Name</span>

I want to get the value of style attribute in a JS variable and save it. I have tried using jQuery's .attr('style'), but it's giving undefined

Also, As suggested here How to get inline CSS style property from element to use

getComputedStyle

but to get styles I need to mention all the styles like

var el = document.querySelector("selector")
console.log(el.style.SomeStyle);

but there are various styles which a user can set dynamically. So, do I need to mention all the inline-styles individually or is there some better way to get that?

Thanks in advance for any help

Update from the void's comment:

As described here Can jQuery get all CSS styles associated with an element?

marknadal had wrote a function that retrieves both inline and external styles, but I just need the inline-styles irrespective of all css classes attached

Improve this question
1

2 Answers 2

Reset to default
3

You can use getAttribute:

const el = document.querySelector('my-element');
const styleStr = el.getAttribute('style');

for example, the following:

<div style="color:blue;display:flex;"></div>

would yield:

'color:blue;display:flex;'

You could then use a regex or something to parse it as needed. I'd recommend converting into an array of arrays or a similar structure rather than an object since you'll likely be unsure of what values are available (this is a simple way of doing that, and there is likely a much more efficient way to break it down. I'll leave that to you):

// gives [ ['color', 'blue'], ['display', 'flex'] ]
str.slice(0, str.length - 1).split(';').map(x => x.split(':'))

You could convert to an object and use a for in loop along with obj.hasOwnProperty(key) as well.

jQuery alternative:

const els = $('my-element');
els.each((i, el) => {
  const styleStr = els.attr('style');
  const styles = styleStr.slice(0, styleStr.length - 1).split(';').map(x => x.split(':'));
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

treyhakanson, please see the comment i have posted in FRS's answer. Thanks
you can use querySelectorAll and iterate over that and it will work. In jQuery the solution is identical, just use .attr instead of getAttribute. I know you said you tried this and it didn't work, but you must have an error elsewhere because I have used .attr('style') before and it works fine
indeed i was doing some mistake, It worked just now. Thanks a lot
0

You can iterate over object available under element's 'style' field as follows:

Warning That object contains also all possible styling of element (with non-numeric property keys), so looping with e.g. for (sth in styles) won't work. You need to iterate styles in array-like way like shown below.

var el = document.querySelector("selector");
var styles = el.style;

for (var i = 0, len = styles.length; i < len; ++i) {
    var name = styles[i];
    var value = styles[value];

    console.log(name); // shows style name, e.g.: color, padding, etc
    console.log(value); // shows style value, e.g.: #fff, 20px, etc
}
Improve this answer

1 Comment

FRS Is it possible in jQuery? as this solution is not working for me as I have various continuous elements which i need to get by iterating.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.