Question

我正在修改一些遗留代码，我找到了一个加载JQuery库的网页，只是为了执行以下操作（这是在页面的<script>中的<body>标记内）：< / p>

$(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' />";

有没有更好的解决方案？

感谢任何帮助。

Answer 1

这是等效的普通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>元素中的任何位置。

Answer 2

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

将JQuery代码转换为其JavaScript等价物

2 个答案: