Question

我正在使用javascript和somethimes一个cretain js文件需要特定的css文件。我想防止在javascript中放置css文件的绝对路径。我甚至想把js文件放在css文件的同一个文件夹中。但是js文件的路径是从执行它的文件计算的。

如何在这个js文件和css文件之间建立连接？

Answer 1

没有完美的解决方案。

我想到的一个解决方案是分析（使用DOM）页面上的脚本标记，找出用于加载脚本本身的路径，然后计算相对于此的路径。

其他解决方案是使用js combiner和css combiner，只需要加载站点所需的所有js和css。

Answer 2

如果您绝对需要将CSS和JavaScript链接在一起，那么在JavaScript文件中定义所需的CSS会更简单。您可以通过添加新的链接标记使HTML页面动态地使用CSS文件，但据我所知，无法指定相对于JavaScript文件的路径。

然而，你可以做的一件事就是这样。首先让每个HTML文件指定相对于该文件的脚本根路径，如：

<script type="text/javascript">
    var jsPath = "relative_to_this_file/styles_and_scripts/"
</script>
<script type="text/javascript"
    src="relative_to_this_file/styles_and_scripts/styler.js">
</script>

并使用styler.js代码执行此操作：

var myStylePath = jsPath + "myStyle.css"
// add link tag for the CSS to HTML here using myStylePath

您还可以在JavaScript或以类似方式动态提供JavaScript的代码中生成绝对路径。如果绝对路径的根部分发生变化，则只需相应地调整一行代码。

或者，您也可以考虑一种不同的策略：静态链接CSS文件与HTML页面，并使用CSS选择器中的类（.myClass {float：left;}）。然后，您可以轻松地使用JavaScript将新类添加到要设置样式的HTML标记中。

Answer 3

但是js文件的路径是从执行它的文件计算的

这并非总是如此。只需使用正斜杠启动路径，它将相对于您的根网站目录，例如

<link type="text/css" rel="stylesheet" href="/path/to/style.css" />

Answer 4

您可以声明一个保存“相对”路径的全局变量，而不是在需要指定文件路径时使用它。例如：

<script type="text/javascript">
var _relPath = "MyFolder/CSS";

...

function SomeFunc() {
   var cssFileName = _relPath + "/myfile.css"; //instead of MyFolder/CSS/myfile.css
}

...
</script>

这样更容易改变。

如果您使用的是服务器端语言，例如ASP.NET，经典ASP，PHP - 您可以输出当前页面的相对路径，让我们知道是否相关。

防止在javascript中为css文件放置绝对路径

4 个答案: