使用JavaScript加載css文件

Question

我是javascript新手。 我正在嘗試使用以下JavaScript代碼加載.css文件，但似乎無法正常工作。

var myCss = document.createElement("link");
myCss.type = "text/css";
myCss.rel = "stylesheet";
myCss.href = "mycss.css";
document.getElementsByTagName("head")[0].appendChild(myCss);

有人可以幫忙嗎？ 謝謝。

Answer 1

您在stackoverflow中還有另一個問題，可以在這里找到： 如何使用Javascript加載CSS文件？

就像user58777所說的那樣，這是一種“古老的”方式。 （信用歸他所有）

他的代碼：

var $ = document; // shortcut
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.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);
}

Answer 2

你為什么要這樣做？ 您期望得到什么好處？

我從來沒有遇到過一個好主意的情況。 CSS文件通常很小，因此動態加載它們並不會帶來多少好處。 只需在head標簽中加載即可。

無論如何，您擁有的代碼應該可以工作。 只要確保路徑正確（它將相對於您正在運行的html文件）即可

---

另一種解決方案是使用所需的所有標記加載html文件，並將其附加到正文中。 退房jQuery.load功能下面的線將加載gameMarkup.html到body標簽。

$( "body" ).load( "gameMarkup.html" );

您可以在此處包括游戲的所有標記（不僅僅是樣式）。 使用js生成元素可能會很有用，但會使代碼難以維護。

如果您不使用jquery，則可以使用XHR進行相同的操作，但這將需要更多的代碼行。