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

亮术网 2020-05-17 本网原创

在开发网站过程中,事先就设置好了图片img的src性,一般来说很少修改这个属性,网站加载时直接显示事先设置好的图片。但如果网页要求实现滚屏加载图片(动态加载图片),也就是一次不显示网页内的所有图片,当滚动屏幕时再显示进入屏幕区的图片。这样不但可以减少对服务器的请求次数,而且能大大节省服务器的流量。

滚屏加载图片事先把网页内要动态显示图片的所有src属性设置为一张小图,待要显示目标图片时再把src属性设置为目标图片的路径。这样就能实现用户看一张图片显示一张,对于图片特别多的网页能大大节省流量。

 

一、javascript获取img的src属性(getAttribute)

在设置修改img的src属性过程中,少不了要获取图片的路径,也就是要获取img的src属性。获取方法有两种,其一,使用getAttribute方法;其二,直接用图片对象的src。两种方法举例如下:

示例使用图片对象:

<img id="imgid" src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="js使用getAttribute方法获取img的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属性。两种方法分别举例如下:

示例使用图片对象:

<img id="imgid" src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="js使用setAttribute方法设置修改img的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:

<img src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="javascript 设置修改 img 没 id 的 src 属性" />

javascript 代码:

<script type="text/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();//调用
  </script>

本文浓缩标签:imgsrcjavascript