首页 > 如何使用js或jq批量把图片的属性赋值给src?

如何使用js或jq批量把图片的属性赋值给src?

举个栗子:

<img data-face="01.jpg" src="plancehold.jpg"/>
...
<img data-face="02.jpg" src="plancehold.jpg"/>
...
...
<img data-face="03.jpg" src="plancehold.jpg"/>
...
<img data-face="04.jpg" src="plancehold.jpg"/>
<img data-face="05.jpg" src="plancehold.jpg"/>
...
<img data-face="06.jpg" src="plancehold.jpg"/>

...为中间间杂着若干标签或内容,现在要用js把自己的data-face的值附给自己的src属性,大道如下效果:

<img data-face="01.jpg" src="01.jpg"/>
...
<img data-face="02.jpg" src="02.jpg"/>
...
...
<img data-face="03.jpg" src="03.jpg"/>
...
<img data-face="04.jpg" src="plancehold.jpg"/>
<img data-face="05.jpg" src="plancehold.jpg"/>
...
<img data-face="06.jpg" src="plancehold.jpg"/>

还有这种效果:

<img data-face="01.jpg" src="01.jpg"/>
...
<img data-face="02.jpg" src="02.jpg"/>
...
...
<img data-face="03.jpg" src="03.jpg"/>
...
<img data-face="04.jpg" src="04.jpg"/>
<img data-face="05.jpg" src="05.jpg"/>
...
<img data-face="06.jpg" src="06.jpg"/>

两种方法分别怎么写?


遍历要附值的所有图片,
获取属性var dataFace = $(this).attr("data-face");
赋值属性$(this).attr("src",dataFace);


使用遍历 封装个函数



  var img = document.getElementsByTagName('img');
  var i = 0;
  for(;i<img.length;i++){
    var face = img[i].getAttribute('data-face');
    img[i].setAttribute('src',face);
  }

水平不高,凑合看吧


jquery版本:

var imgs=$("img[data-face]");
    imgs.each(function(num,e){
        var _this=$(this);
        _this.attr("src",_this.data("face"));
    });
【热门文章】
【热门文章】