2

我正在修改一些遗留代码,我发现一个加载 JQuery 库的网页仅用于执行以下操作(这是在页面的<script>标签内<body>):

$(document).ready(function(){ 
  //Once the document is ready, run the following code
  $("head").append($("<link rel='stylesheet' href='style-"+myCSS+".css' type='text/css' media='screen' />"));
});

我想将此代码转换为常规 JavaScript 并删除 JQuery(我不反对使用 JQuery,我反对必须加载 90+Kb 才能做到这一点的想法)。

我的想法,但我不是 JS 专家,是使用(在页面中的相同位置):

headReference.innerHTML = "<link rel='stylesheet' href='style-" + myCSS + ".css' type='text/css' media='screen' />";

有没有更好的解决方案?

任何帮助表示赞赏。

4

2 回答 2

3

这是等效的纯javascript:

var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'screen';
link.href = 'style-'+myCSS+'.css';
head.appendChild(link);

如果在文档加载后加载它很重要(这可能不是必需的),那么您可以将此代码放在标签末尾之前的脚本标签中<body>- 否则,您可以将其放在<body>元素中的任何位置。

于 2012-09-02T09:01:38.510 回答
1

jfriend00 的回答很好,这是另一种更接近 jQuery 原版的方法:

var h = document.createElement('head');
h.innerHTML = "<link rel='stylesheet' href='style-" + 
              myCSS + ".css' type='text/css' media='screen'>"
document.getElementsByTagName('head')[0].appendChild(h.firstChild);
于 2012-09-02T10:03:19.557 回答