class样式转换为行内样式

25111926

发布于
2018-06-25

求一个方案（非node环境）将页面引入的css文件中的class样式提取出来转换为标签的行内样式style，例如：

将如下的格式

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

style.css

p {
  text-decoration: underline;
}

转换成为：

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

javascript html css

阅读 6.8k

5 个回答

得票最新

xiaofei

8451214

发布于
2018-06-25

你好，可以这样试试

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

        .div {
            background-color: #000;
            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>