DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 動態加載圖片路徑 保持JavaScript控件的相對獨立性
動態加載圖片路徑 保持JavaScript控件的相對獨立性
編輯:關於JavaScript     
當時考慮有三種方法:
1.直接把路徑寫在js文件裡,但如果引用頁面路徑層級改變就沒轍了。
2.寫個class,放在主題包裡的css文件或者單獨創建一個css文件給日期控件專用。但是控件中的其他元素並沒有使用class的需要,單獨建立相應css文檔似乎小題大做。
3.把以上兩個方法排除後,自然要采用動態加載圖片路徑的方法咯。
關鍵代碼如下:
復制代碼 代碼如下:
//創建一個全局變量保存路徑
var imgRootUrl = "";

//獲取圖片路徑所在目錄
var strPath=window.document.location.pathname; //獲取主機地址之後的目錄部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//獲取目錄層級
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //這個Images其實也可設為參數,由於所有項目圖片文件夾命名固定,所以沒有設立參數,但仍然保存可擴展性。

加圖後,控件效果是相當美觀了:

順便附上所有window.document.location其下屬性:
document.location.hash // #號後的部分 VS window.location.hash
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應用程序)
document.location.port // 端口號
document.location.protocol // 網絡協議(http:)
document.location.search // ?號後的部分
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved