javascript - 如何在 css 链接标签中插入 javascript 函数

Question

我们如何在一些 css 链接标记中调用 javascript 函数？

例如:

<link rel="stylesheet" href="https://<%=getServerIP()%>/path/to/cssFiles/file1.css" type="text/css">

正如我们所见，这个 scriplet 工作得很好。它调用 scriptlet 函数。抢IP。访问 css 文件。

我需要用 javascript 函数做同样的事情。

<link rel="stylesheet" href="https://'getServerIP()'/path/to/cssFiles/file1.css" type="text/css">

为什么第二种方法不起作用？有什么解决办法吗？

提前致谢。 :)

Answer 1

javascript 中没有类似的语法可以像在 PHP 中那样将变量放入 html 中。为了在 javascript 中动态加载 CSS 文件，您需要创建一个链接元素并将其附加到头部。像这样:

function loadCssFile(filename){
  var linkElement=document.createElement("link");
  linkElement.setAttribute("rel", "stylesheet");
  linkElement.setAttribute("type", "text/css");
  linkElement.setAttribute("href", filename);
  document.getElementsByTagName("head")[0].appendChild(linkElement);
}

var url = 'https://'+getServerIP()+'/path/to/cssFiles/file1.css';
loadCssFile(url);