Looking for a way to convert applied css classes to inline styles

I know this probably isn’t really React-specific, but this is the community I’m most familiar with.

I want to take an element that has a CSS class applied, and apply that CSS as an inline style rather than the class. My end goal is to get an HTML string that I could theoretically paste into a page as-is and have the proper styles applied, without having to rely on the .css files that have the classes applied to that element.

So for example, I have the following CSS:

.redsquare { background-color: red; width: 50px; height: 50px; }

And I want to convert

<div id=”ABC” class=”redsquare”></div>

to

<div id=”ABC” style=”background-color: red; width: 50px; height: 50px;”></div>

And then get the html string of that converted element:

const element = document.getElementById(“ABC”); element.outerHTML;

Any way I can do this client-side?