在html和js中設置變量和值

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，您可以將其設置為有條件並使用類選擇器來實現）。

例如： <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的人隱藏它。

使用某種模板引擎會更好。

模板工具包可以從服務器端腳本驅動，或用於生成靜態頁面以進行上載（例如，使用ttree ）。

然后，您可以執行以下操作：

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

接着：

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

他們有一個TT網頁創作教程 。