可以用Javascript將css樣式表導入html頁面嗎？如果有，怎么做？

頁（page的縮寫）javascript將被托管在我的網站上，但我希望用戶能夠把& lthead & gt標簽，它應該能夠將我的服務器上的css文件導入到當前網頁。(css文件和javascript文件都將駐留在我的服務器上)。

這是& quot老派& quot這種方式有望在所有瀏覽器上運行。理論上，你可以使用setAttribute，不幸的是IE6并不總是支持它。

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.;
    link.media = 'all';
    head.appendChild(link);
}

這個例子檢查CSS是否已經被添加，所以它只添加一次。

將代碼放入JavaScript文件中，讓最終用戶簡單地包含JavaScript，并確保CSS路徑是絕對的，以便從您的服務器加載。

香草 下面是一個使用普通JavaScript根據URL的文件名部分將CSS鏈接注入head元素的示例:

<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)出現。

如果您使用jquery:

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

我想類似這樣的腳本可以做到:

<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);
}
//]]>

Element.insertAdjacentHTML有非常好的瀏覽器支持，一行就可以添加一個樣式表。

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

如果你想知道(或者等到)樣式本身已經加載了這個作品:

// 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 = () => resolve();
    link.onerror = () => reject();
    link.href = url;

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

用法:

fetchStyle(url)
 .then(
   () => console.log("style loaded succesfully"),
   () => console.error("style could not be loaded"),
);

使用此代碼:

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);

在現代瀏覽器中，你可以像這樣使用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美分來了。

根據您的需求，還有另一種方法可以做到這一點。

我有一個例子，我想讓一個css文件只活動一會兒。比如css切換。激活css，然后在另一個事件后停用它。

你可以在新的css中的所有元素前面添加一個類/id，然后切換css的基本節點的類/id，而不是動態地加載css然后刪除它(就像body標簽)。

在這個解決方案中，你會有更多的css文件被加載，但是你有一個更動態的方式來切換css布局。

你聽說過承諾嗎？它們可以在所有現代瀏覽器上運行，使用起來相對簡單。看看這個將css注入html頭的簡單方法:

function loadStyle(src) {
    return new Promise(function (resolve, reject) {
        let link = document.createElement('link');
        link.href = src;
        link.rel = 'stylesheet';

        link.onload = () => resolve(link);
        link.onerror = () => reject(new Error(`Style load error for ${src}`));

        document.head.append(link);
    });
}

您可以按如下方式實現它:

window.onload = function () {
    loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
        .then(() => loadStyle("css/style.css"))
        .then(() => loadStyle("css/icomoon.css"))
        .then(() => {
            alert('All styles are loaded!');
        }).catch(err => alert(err));
}

真的很酷，對吧？這是一種使用承諾來決定樣式優先級的方法。

要查看多樣式裝入實施，請參閱:https://stackoverflow.com/a/63936671/13720928

下面是一個單行示例，它使用普通的JavaScript根據URL的文件名部分將CSS鏈接注入head元素:

document . head . innerhtml+= ' & lt；link rel = & quot樣式表& quothref = & quotCSS/style . CSS & quot；& gt'；

大多數瀏覽器都支持它。查看瀏覽器兼容性。

有一個通用的jquery插件，可以按需同步和異步加載css和JS文件。 它還跟蹤已經加載的內容:) 參見:http://code.google.com/p/rloader/

這里有一種使用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);

下面是用于加載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'])) ();

來自未來的回答。 2022年，我們有了導入css文件的導入斷言api。

import mycss from "./style/mycss.css" assert { type: "css" };
    document.adoptedStyleSheets = [sheet];
    shadowRoot.adoptedStyleSheets = [sheet];

瀏覽器支持: 直到2022年9月，只有基于chromium的瀏覽器和safari支持。

閱讀更多信息，請訪問: v8導入斷言發布

tc39 github t39進口斷言提案

我想分享另一種方法，不僅可以加載css，還可以加載所有的資源(js，css，images ),并處理一堆文件的onload事件。這是異步資產加載器。請參見下面的示例:

<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
      {uri: jsfile, type: "script"},
      {uri: cssfile, type: "style"},
      {uri: imgfile, type: "img"}
    ], function () {
      console.log("Assets are loaded");
      console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
    });
</script>

根據異步資產加載器文檔

這個函數使用記憶。并且可以多次調用，不會因為加載和運行同一個樣式表兩次而產生沖突。此外，解析速度也沒有樣式表實際加載速度快。

const loadStyle = function () {
    let cache = {};
    return function (src) {
        return cache[src] || (cache[src] = new Promise((resolve, reject) => {
            let s = document.createElement('link');
            s.rel = 'stylesheet';
            s.href = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.append(s);
        }));
    }
}();

請注意函數表達式后面的括號()。

樣式表的并行加載:

Promise.all([
    loadStyle('/style1.css'),
    loadStyle('/style2.css'),
    // ...
]).then(() => {
    // do something
})

您可以使用相同的方法動態加載腳本。

我用的是百里香葉，效果很好。謝謝

使用:

document.getElementById("of head/body tag")
        .innerHTML += '<link rel="stylesheet" type="text/css" href="style.css">';