css ,javascript中的圖片路徑設定

來源:互聯網
上載者:User

css路徑設定跟javascript路徑設定是有區別的:

1.css中的圖片設定是根據css本身的檔案路徑去確定。

2.javascript中的圖片路徑設定是根據被引用的javascript的頁面【.html,aspx,asp,jsp等】路徑設定。

 

之前在寫前端代碼時,在圖片路徑的設定那裡經常會遇到一個問題.比方說,我

(1)在根目錄下面建立了個"images"文夾,裡面放了張圖片top.gif

(2)在根目錄下另外建立了兩個檔案夾"CSS"和"JS"專門用來存放用到的.css檔案和.js檔案(假設我們用到的為"test.css"和"test.js")

假設在根目錄下有個"test.html"檔案,裡面分別引用了"test.css"以及"test.js"

<link type="text/css" href="CSS/test.css" rel="stylesheet"/>

<script type="text/javascript" src="JS/test.js"></script>

在test.html中有這樣一個標籤

<div id="top">

<p>Just for test!</p>

</div>

如果這時我要設定id為top的標籤的背景圖片,在"test.css"裡這樣寫:

#top{ background:url(../images/top.gif); }

在test.js裡面這樣寫:

document.getElementById("top").style.background="images/top.gif";

可以發現兩者有明顯的不同,被這問題困擾了很久,卻一直搞不清楚是什麼原因,在網上google了下,終於找到了答案.

html頁面中,引用js指令碼和css檔案的機制是不一樣的.

(1)對於js指令碼,html是吧指令碼載入到頁面中一起解析(就跟你的js指令碼直接寫在這個頁面是一樣的)

(2)而對css檔案,則僅僅是提供一個串連,並不會將其載入到html頁面中,如在本例中,html根據連結去css檔案中尋找所需要的圖片檔案

這兩者的區別很重要,當我們要引用一個圖片時,在js檔案中要以引用它的html的路徑為準,而在css檔案中,要以改css路徑為準.

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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