通過Javascript將外部CSS樣式錶轉換爲嵌入樣式，或轉換爲<style>標記

我需要使用CSS樣式獲取完整的HTML文檔，而無需實際使用外部CSS文件。通過Javascript將外部CSS樣式錶轉換爲嵌入樣式，或轉換爲<style>標記

例如我需要這個...

的index.html

<head> 
    <link rel="stylesheet" href="css/styles.css"> 
</head> 

<body> 
    <div id="foo">Test</div> 
</body>

CSS/Styles.css中

#foo { 
    color: red; 
}

...變換變成某物像任FF的，以便：

1）中的所有外部CSS樣式是直列d入元件

的index.html

<head> 
    <link rel="stylesheet" href="css/styles.css"> 
</head> 

<body> 
    <div id="foo" style="color:red;">Test</div> 
</body>

2）款式內嵌-D爲<style>標籤

的index.html

<head> 
    <link rel="stylesheet" href="css/styles.css"> 
    <style>#foo { color: red; }</style> 
</head> 

<body> 
    <div id="foo">Test</div> 
</body>

那是可行的香草的Javascript/jQuery的？謝謝。

來源

2016-09-06 Alphonsus

可能是的，但爲什麼？ – Roberrrt

這個工具可以讓你內聯樣式https://putsmail.com/tests/new –

是的......但是你做了什麼？作爲參考，你可以使用'jquery.getStyleObject.js'插件從https://gist.github.com/surjikal/3007123 –

我有第二種情況的解決方案。使用AJAX調用來獲取文件的內容爲字符串和文檔

var css = '.popover { background-color: #666666; color: #ffffff';    
head = document.head || document.getElementsByTagName('head')[0], 
style = document.createElement('style'); 
style.type = 'text/css'; 
if (style.styleSheet){ 
    style.styleSheet.cssText = css; 
} else { 
    style.appendChild(document.createTextNode(css)); 
} 
head.appendChild(style);

來源

2016-09-06 10:26:55

在香草的JavaScript，你可以簡單地做一個HTTP請求，以獲得css/styles.css文件的內容中添加動態創建的風格標籤，然後創建一個新的style元素。沿着這些線：

var head = document.head || document.getElementsByTagName('head')[0], 
    xhttp = new XMLHttpRequest(); 

xhttp.open('GET', '/css/styles.css'); 
xhttp.onreadystatechange = function() { 
    if (xhttp.readyState === 4) { 
    if (xhttp.status === 200) { 
     var style = document.createElement('style'); 
     style.type = 'text/css'; 
     if (style.styleSheet) { 
     style.styleSheet.cssText = xhttp.responseText; 
     } else { 
     style.appendChild(document.createTextNode(xhttp.responseText)); 
     } 
     head.appendChild(style); 
    } else { 
     console.log("Error", xhttp.statusText); 
    } 
    } 
} 
xhttp.send();

來源

2016-09-06 10:29:37

通過Javascript將外部CSS樣式錶轉換爲嵌入樣式，或轉換爲<style>標記

回答

相關問題