在開發(fā)網(wǎng)站過程中，事先就設(shè)置好了圖片img的src性，一般來說很少修改這個屬性，網(wǎng)站加載時直接顯示事先設(shè)置好的圖片。但如果網(wǎng)頁要求實(shí)現(xiàn)滾屏加載圖片(動態(tài)加載圖片)，也就是一次不顯示網(wǎng)頁內(nèi)的所有圖片，當(dāng)滾動屏幕時再顯示進(jìn)入屏幕區(qū)的圖片。這樣不但可以減少對服務(wù)器的請求次數(shù)，而且能大大節(jié)省服務(wù)器的流量。

滾屏加載圖片事先把網(wǎng)頁內(nèi)要動態(tài)顯示圖片的所有src屬性設(shè)置為一張小圖，待要顯示目標(biāo)圖片時再把src屬性設(shè)置為目標(biāo)圖片的路徑。這樣就能實(shí)現(xiàn)用戶看一張圖片顯示一張，對于圖片特別多的網(wǎng)頁能大大節(jié)省流量。

一、javascript獲取img的src屬性(getAttribute)

在設(shè)置修改img的src屬性過程中，少不了要獲取圖片的路徑，也就是要獲取img的src屬性。獲取方法有兩種，其一，使用getAttribute方法；其二，直接用圖片對象的src。兩種方法舉例如下：

示例使用圖片對象：

方法一：使用getAttribute方法獲取img的src屬性

var obj = document.getElementById("imgid");

var imgSrc = obj.getAttribute("src");

var realSrc = obj.getAttribute("tSrc");

用getAttribute()方法不但可以獲取到img的src屬性，還能獲取到不是img固有的tSrc屬性。這個方法獲取能力強(qiáng)一些，但版本低的老瀏覽器(如ie6)不支持。

方法二：直接獲取img的src屬性

var obj = document.getElementById("imgid");

var imgSrc = obj.src;//能獲取到

var realSrc = obj.tSrc;//提示undefined，即tSrc屬性沒有定義，不能獲取到

二、javascript設(shè)置修改img的src屬性(setAttribute)

js設(shè)置修改img的src屬性也像獲取一樣有兩種方法；其一，用setAttribute方法；其二，根據(jù)圖片對象直接獲取src屬性。兩種方法分別舉例如下：

示例使用圖片對象：

方法一：使用setAttribute方法修改img的src屬性

var obj = document.setElementById("imgid");

var imgSrc = obj.setAttribute("src", tSrc);//把圖片修改為目標(biāo)路徑

var realSrc = obj.setAttribute("tSrc", src);//把圖片的路徑暫存到tSrc

使用 setAttribute 方法，無論是修改src屬性還是設(shè)置tSrc屬性都有效，不過舊版本的瀏覽器(如ie6)不支持，ie8以上瀏覽器才支持。

方法二：直接設(shè)置img的src屬性

var obj = document.getElementById("imgid");

obj.src = imgSrc;//能設(shè)置

obj.tSrc = realSrc;//提示undefined，即tSrc屬性沒有定義，設(shè)置失敗

三、javascript 設(shè)置修改 img 沒 id 的 src 屬性

html：

javascript 代碼：

function ChangeImgSrcWithoutId() {

var arrImg = document.images;

for (var i = 0; i < arrImg.length; i++) {

if (arrImg[i].getAttribute("tSrc") != undefined) {

arrImg[i].src = arrImg[i].getAttribute("tSrc");

}

}

}

ChangeImgSrcWithoutId();//調(diào)用

總結(jié)

以上是生活随笔為你收集整理的html+设置img+src属性值,javascript获取、设置修改img的src属性（get/setAttribute）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。