当前位置:首页 > 站长笔记 > javascript笔记 > 正文
运行天数:3006 天 最后更新:2020-7-11

原生js图片替换位置

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2018年08月01日 | 作者: 影子 | 分类: javascript笔记, 自用代码 | 点击量: 790

WDJA网站内容管理系统,免费开源可商用 点我获取,简单好用的PHP版CMS

原生js图片替换位置

 

 

<script>
function changeImg(id,img) {
document.getElementById(id).src =img;
}
</script>
<p><img src=”https://www.baidu.com/img/baidu_jgylogo3.gif” id=”baidu”/></p>
<p><img src=”https://www.baidu.com/img/baidu_jgylogo3.gif” id=”qihu”/></p>
<p>
<img src=”https://www.baidu.com/img/bd_logo1.png?where=super” onclick=”changeImg(‘baidu’,this.src)” />
<img src=”https://p.ssl.qhimg.com/t01e92920a7b90351cc.png” onclick=”changeImg(‘qihu’,this.src)” />
</p>

 

同步修改ID方法

<script>
function changeImg(sclass,sid,img) {
tclass = getElementsByClass(sclass);
tclass[0].src =img;
tid =tclass[0].getAttribute(“id”);
tclass[0].setAttribute(“id”,’s’+sid);
}

function getElementsByClass(classnames){
var classobj = new Array();
var classint = 0;
var tags =document.getElementsByTagName(“*”);
for(var i in tags){
if(tags[i].nodeType == 1){
if(tags[i].getAttribute(“class”) == classnames){
classobj[classint] = tags[i];
classint++;
}
}
}
return classobj;
}
</script>
<p><img src=”https://www.baidu.com/img/baidu_jgylogo3.gif” id=”baidu” class=”baidu”/></p>
<p><img src=”https://www.baidu.com/img/baidu_jgylogo3.gif” id=”qihu” class=”qihu”/></p>
<p>
<img src=”https://www.baidu.com/img/bd_logo1.png?where=super” onclick=”changeImg(‘baidu’,’12’,this.src)” />
<img src=”https://p.ssl.qhimg.com/t01e92920a7b90351cc.png” onclick=”changeImg(‘baidu’,’13’,this.src)” />
<img src=”https://p.ssl.qhimg.com/t01e92920a7b90351cc.png” onclick=”changeImg(‘qihu’,’23’,this.src)” />
</p>

 

 

 

 



手机扫码浏览本文


关键词:

本文网址:https://www.menglei.net/2553/,转载请以链接形式注明出处,谢谢合作!

*本站部分内容转载自其他媒体,版权归其所有。如若内容或图片侵犯您的权益,请与本站联系,我们将在24小时内处理完毕。

作者:清晨@深圳网站建设专家. | 清晨,领先的深圳网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com