javascript获取、设置修改img的src属性（get/setAttribute）

关注公众号：”奇叔码技术“

回复：“java面试题大全”或者“java面试题”
即可免费领取资料





　在开发网站过程中，事先就设置好了图片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属性没有定义，设置失败

//点击切换图片 案例一 start
	var ImgOne = document.getElementById("ImgOne");
	var flag = true;
	ImgOne.onclick = function(){
		if(flag){
			 
            ImgOne.src = "images/myself_image1.jpg";
			flag = false;
		}
		else{
			ImgOne.src = "images/潮流动图4.jpg";
			flag = true;
		}
	}
	
	
	//点击切换图片 案例一 over