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中有另外一个关于它的问题，你可以在这里找到它： How to load up CSS files using Javascript?

这是一种“oldschool”方式，就像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文件通常很小，所以通过动态加载它们并没有真正获得太多。只需在头标签中加载。

无论如何，你所拥有的代码应该可行。请确保路径正确（它将与您正在运行的html文件相关）

另一个解决方案是加载一个包含所需标记的html文件，然后将其附加到正文中。查看jQuery.load功能下面的行会将gameMarkup.html加载到正文标记中。

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

您可以在此处包含游戏的所有标记（不仅仅是样式）。使用js生成元素可能很有用，但它会使代码难以维护。

如果你没有使用jquery，你可以用XHR做同样的事情，但它会有更多代码。

使用javascript加载css文件

2 个答案: