動態載入圖片路徑,保持JavaScript控制項的相對獨立性。

來源:互聯網
上載者:User
根據新介面的要求,需要一部分圖片來增強日期控制項的美觀性。考慮到既要實現載入圖表的目標,又要保持控制項的獨立性以便將來的移植。當時考慮有三種方法: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        // ?號後的部分

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.