鍍金池/ 問答/HTML/ class樣式轉(zhuǎn)換為行內(nèi)樣式

class樣式轉(zhuǎn)換為行內(nèi)樣式

求一個方案（非node環(huán)境）將頁面引入的css文件中的class樣式提取出來轉(zhuǎn)換為標簽的行內(nèi)樣式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;
}

轉(zhuǎn)換成為：

<html>
<head>
</head>
<body>
  <p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>
回答
編輯回答
別逞強

你好，可以這樣試試

<!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>
2017年11月3日 17:17
編輯回答
使勁操

你這個腦洞很清奇。
為什么會需要這么做？

2017年5月12日 13:33
編輯回答
維他命

兄弟 你直接寫不就好了嗎？ 這么整累不累??？ 你想寫行內(nèi)直接行內(nèi) 想外鏈直接外鏈多好

2018年4月19日 09:37
編輯回答
亮瞎她

在js里面寫。選中相應(yīng)的的元素標簽。在設(shè)置相應(yīng)的屬性，就可以了
圖片描述

2017年10月30日 18:53
編輯回答
詆毀你

正上班了，愣是沒憋住笑了出聲

2018年1月11日 13:23