当前位置:清晨 » 站长笔记 » javascript笔记 » 原生js图片替换位置

原生js图片替换位置

发布日期:2018年8月1日 10:08:30 点击量: 155

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

原生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.info/2553/,转载请以链接形式注明出处,谢谢合作!


老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725


发表评论

电子邮件地址不会被公开。 必填项已用*标注