Convert class style to inline style

find a solution (non-node environment) to extract the class style from the css file introduced by the page and convert it into the inline style style, of the tag, for example:

put the following format

<html>
<head>
  <style>
    p { color: red; }
  </style> 
  <link rel="stylesheet" href="style.css">
</head>
<body>
  

Test

</body> </html>

style.css

p {
  text-decoration: underline;
}

convert to:

<html>
<head>
</head>
<body>
  <p style="color: red; text-decoration: underline;">Test

</body> </html>
Mar.21,2021

you are very clever.
Why would you need to do this?


Brother, why don't you just write it? Are you tired so much?


when you are at work, you can't help laughing.


write in js. Select the appropriate element tag. After setting the corresponding properties, you can


Hello, you can try this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: -sharpfff;
        }

        .div {
            background-color: -sharp000;
            color: blue;
        }
    </style>
</head>
<body>
<div class='div'>
    
</div>

<script !src="">
    var div = document.querySelector('.div')
    var style = window.getComputedStyle(div, null)
    console.log(style);


    for (var k in style) {

        if (isNaN(k) && k != 'cssText') {

            if (style[k] == '0px' || style[k] == 'none' || style[k] == 'normal' || style[k] == 'auto' || !style[k]) {
                delete  div.style[k]
            } else {
                // console.log('--------------');
                // console.log(style[k] == '0px' || style[k] == 'none' || style[k] == 'normal' || style[k] == 'auto' || !style[k]);
                // console.log(style[k], 'value');
                // console.log(k, 'k');
                // console.log('--------------');
                div.style[k] = style[k];
            }
        }


    }

</script>
</body>
</html>
Menu