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

滾屏加載圖片事先把網頁內要動態顯示圖片的所有src屬性設置為一張小圖，待要顯示目標圖片時再把src屬性設置為目標圖片的路徑。這樣就能實現用戶看一張圖片顯示一張，對于圖片特別多的網頁能大大節省流量。

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

在設置修改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屬性。這個方法獲取能力強一些，但版本低的老瀏覽器(如ie6)不支持。

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

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

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

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

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

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

示例使用圖片對象：

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

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

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

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

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

方法二：直接設置img的src屬性

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

obj.src = imgSrc;//能設置

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

三、javascript 設置修改 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();//調用

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。