2

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

任何人都可以帮忙吗？谢谢。

4

2 回答 2

2

你在 stackoverflow 中有另一个关于它的问题，你可以在这里找到它： How to load up CSS files using Javascript?

就像 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);
}
于 2013-10-07T22:24:20.813 回答
1

你为什么要这样做？你期待什么好处？

我从来没有遇到过这是一个好主意的情况。CSS 文件通常非常小，因此通过动态加载它们并没有真正获得太多收益。只需在 head 标签中加载即可。

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

另一种解决方案是加载一个包含您需要的所有标记的 html 文件，并将其附加到正文中。查看jQuery.load函数 下面的行将加载gameMarkup.html到 body 标记中。

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

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

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

于 2013-10-07T22:31:45.250 回答