外部CSSスタイルシートをインラインスタイルに変換するか、または<style>タグにJavaScriptを使用して変換します。

実際に外部CSSファイルを使用せずにCSSスタイルでHTML文書全体を取得する必要があります。外部CSSスタイルシートをインラインスタイルに変換するか、または<style>タグにJavaScriptを使用して変換します。

たとえば、私はこれを必要とする...

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内のすべてのスタイルが

index.htmlを

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

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

要素にインラインDであります

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 –

はい...あなたは何をしましたか？参考までに、https://gist.github.com/surjikal/3007123の 'jquery.getStyleObject.js'プラグインを使用することができます –

私は2番目のケースの解決法を持っています。文字列としてファイルの内容を取得し、あなたは、単にcss/styles.cssファイルの内容を取得するためにHTTPリクエストを行うことができますJavaScriptのバニラで文書

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

で動的に作成したスタイルタグを追加し、新しいを作成するために、AJAX呼び出しを使用します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

外部CSSスタイルシートをインラインスタイルに変換するか、または<style>タグにJavaScriptを使用して変換します。

答えて

関連する問題