Question

我在该js文件中有一个js文件，我有以下变量

 var image_path="images";
 var style_path="style";

我想在html文件中使用这些变量

喜欢图片陈述

       <img src="path from js/logo.gif">

或样式表声明

       <link rel="stylesheet" href="path from js/constant.css" type="text/css" />

这背后的基本思想是：如果我们更改图像文件夹的名称或图像文件夹的路径，我们只更改一个JS文件而不是1000个html文件。

样式表相同。

或在java脚本或Jquery中执行相同操作的任何其他方法

由于

Answer 1

您是否考虑使用<base>代码？我为什么不问：）

Answer 2

我偏爱jQuery。我同意服务器端可能更好的人群，但如果你必须在客户端做，你可以做以下。

为img添加一个应该受影响的元素的类（或者如果它应该适用于所有的话，请跳过我的示例的这个方面...我只是想用jQuery证明你可以使它成为条件并使用类选择器来做左右）。

ex：<img class="relative_url" src="logo.gif" /> 或：<img class="img_style relative_url" src="logo.gif" />（如果图像已经有一个类）

然后，您可以使用类似下面的函数，在页面加载（通过$(document).ready()）获取与类名匹配的所有img元素，并在它们之前迭代根路径。

请原谅我的语法并将其作为伪代码...我暂时没有完成web / javascript / jquery的事情

$(document).ready(function(){
    fixRelativeUrls();
});

function fixRelativeUrls()
{
    $("img.relative_url").each(function(index) {
        $(this).src = image_path + "/" + $(this).src;
    });
}

Answer 3

您可以使用document.write（或jQuery）创建标记：

document.write('<img src="' + image_path + '/logo.gif">');

请注意，必须在调用之前设置变量。

但是，最好在服务器端代码中执行此操作。

Answer 4

你不能明智地做到这一点。您必须使用JavaScript动态生成所有内容 - 这会将其隐藏在搜索引擎和没有JS的任何人之外。

最好使用某种模板引擎。

Template-Toolkit可以从服务器端脚本驱动，或用于生成静态页面以进行上传（例如使用ttree）。

然后您可以执行以下操作：

[% 
    image_path = "images";
    style_path = "style";
 %]

然后：

[% INCLUDE "common.tt"; %]
<link rel="stylesheet" href="[% style_path %]/constant.css" type="text/css" />

他们有a tutorial for web page authoring in TT。

在html＆amp;中设置变量和值JS

4 个答案: