web-dev-qa-db-ja.com

Javascriptを使ってCSSファイルをロードする方法

Javascriptを使用してCSSスタイルシートをHTMLページにインポートすることは可能ですか？もしそうなら、どうすればそれができますか？

ジャバスクリプトは私のサイトでホストされるでしょうが、私はユーザーが彼らのウェブサイトの<head>タグを入れることができることを望み、そしてそれは現在のウェブページに私のサーバーでホストされるcssファイルをインポートできるべきです。 （cssファイルとjavascriptファイルの両方が私のサーバーでホストされます）。

javascripthtmlcssdhtml
281
Click Upvote

これが「オールドスクール」なやり方で、これはすべてのブラウザでうまくいくことを願っています。理論的には、残念ながらIE 6では一貫してサポートされていないため、setAttributeを使用します。

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

この例では、CSSがすでに追加されているかどうかをチェックして、CSSを1回だけ追加します。

そのコードをjavascriptファイルに入れ、エンドユーザーに単にjavascriptを含めるようにし、CSSパスが絶対パスでサーバーからロードされるようにします。

バニラJS

これは、URLのファイル名部分に基づいてCSSリンクをhead要素にインジェクトする単純なJavaScriptを使用した例です。

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

閉じるheadタグの直前にコードを挿入すると、ページがレンダリングされる前にCSSがロードされます。外部JavaScript（.js）ファイルを使用すると、スタイルが設定されていないコンテンツのフラッシュ（ FOUC ）が表示されます。

379
user58777

あなたがjqueryを使うならば：

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
61
BoumTAC

私はこのスクリプトが何かをするだろうと思います：

<script type="text/javascript" src="/js/styles.js"></script>

このJSファイルには、以下のステートメントが含まれています。

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

あなたのサイトを参照するのであれば、JavaScriptとCSSのアドレスは絶対である必要があります。

この記事では、多くのCSSインポート手法について説明しています 「分岐手法を使ったCSSハックは絶対にやらないでください」 。

しかし、 「JavaScriptを使用してPortlet CSSスタイルシートを動的に追加する」 記事では、CreateStyleSheetの可能性（IE用の独自メソッド）についても言及しています。

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
48
VonC

次の関数を呼び出してCSSまたはJavaScriptファイルを動的にロードします。

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

filename引数として名前を含む完全なファイルパスを渡します。

14
Talha

私はこれがかなり古いスレッドであることを知っていますが、ここに私の5セントが来ます。

あなたのニーズが何であるかに応じてこれを行うための別の方法があります。

CSSファイルをしばらくアクティブにしたい場合があります。 CSSの切り替えと同じです。 CSSをアクティブにしてから別のイベントの後にそれを非アクティブにします。

CSSを動的にロードしてから削除する代わりに、新しいCSSのすべての要素の前にClass/IDを追加してから、CSSのベースノードのそのClass/IDを切り替えることができます（bodyタグなど）。

このソリューションでは、最初により多くのCSSファイルをロードする必要がありますが、CSSレイアウトを動的に切り替える方法があります。

7
JohanSellberg

スタイル自体がロードされるまで知りたい（または待つ）場合は、次のようになります。

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};
7
sandstrom

Element.insertAdjacentHTML は非常に優れたブラウザサポートを持っており、一行でスタイルシートを追加することができます。

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
7
dangowans

最近のブラウザでは、このようにpromiseを使うことができます。約束を付けてローダー関数を作成します。

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

それから明らかにあなたはCSSがロードされた後に何かがしたいです。このようにCSSが読み込まれた後に実行する必要がある関数を呼び出すことができます。

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

あなたがそれがどのように機能するかを深く理解したいならば、役に立つリンク：

約束に関する公式文書

お約束の便利なガイド

約束に関する素晴らしいイントロビデオ

5
Arthur Tarasov

このコードを使用してください：

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);
3
Gaurav Tripathi

CSSとJSファイルを同期してasychをオンデマンドでロードする一般的なjqueryプラグインがあります。既にロードされているものも追跡します:)参照： http://code.google.com/p/rloader/

3
ez2

これがjQueryの要素作成メソッド（私の好み）とコールバックonLoadの使い方です。

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);
3
Lounge9

YUIライブラリ があなたが探しているものかもしれません。クロスドメインロードもサポートしています。

あなたがjqueryを使うなら、 このプラグイン は同じことをします。

2
anand.trex

JSやCSSのロードに使用する完全なコードの下

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();
1
Hasan A Yousef

この YUIライブラリ を使うか、この 記事を使って実装することができます

1
zihotki
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

私はタイムリーフを使っています、これはうまくいきます。ありがとう

0
ekoindra0912