调用 javascript 函数以包含样式表失败

Question

这是我遇到的失败——“sitePath”是全局文件范围内的 javascript 变量：

  <link rel="stylesheet" type="text/css"     
          href="javascript:getJval('sitePath')/rb_UI_styles.css" />

这里是getJval()：

  function getJval(theVal)
  {
      return theVal;
  }

最初我尝试过，但没有成功：

  <link rel="stylesheet" type="text/css"     
          href="javascript:sitePath/rb_UI_styles.css" />     

我读了一堆 SO 帖子，包括 this 一个，我读过的许多帖子都有一个“href”，它是通过使用

     href="javascript:someFunc(someparam)" 

语法。

但是，这种调用 javascript 函数来设置“href”的语法不在用于拉入样式表的 href 中为我工作：

  <link rel="stylesheet" type="text/css"     
          href="javascript:getJval('sitePath')/rb_UI_styles.css" />

不知道为什么。我知道可以拉入样式表，因为如果我将上面的内容替换为 CSS 文件的实际 URL，样式就会成功显示在网页上。

出于某种原因，此 javascript:function() 语法不是否可以在样式表链接中设置 href？

Answer 1

问题是您不能使用 JavaScript 将文件路径输出到 href 属性内的样式表。当您对锚标记的href 使用JavaScript 时，只有在单击锚标记时才会调用JavaScript 函数。对于链接元素，它根本不处理 JavaScript。

如果你想动态加载 CSS，你要么需要在页面创建之前使用 PHP 来回显正确的文件路径，要么调用一个 JavaScript 函数将链接元素插入 DOM 作为@Pranav Ram建议。

function loadStyleSheet( path, fn, scope ) {
   var head = document.getElementsByTagName( 'head' )[0]
       link = document.createElement( 'link' );
   link.setAttribute( 'href', path );
   link.setAttribute( 'rel', 'stylesheet' );
   link.setAttribute( 'type', 'text/css' );
   head.appendChild(link);
}