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 回答