JS怎么更换img中src路径

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS怎么更换img中src路径相关的知识,希望对你有一定的参考价值。

JS代码:
<script language="javascript">
function tabit(id,cid,did,fid)
id.style.display="block";cid.style.display="none";
var sr1=document.getElementById(did).src;
sr1 = "yuanjian/" & did & "-g.png";
var sr2=document.getElementById(fid).src;
sr2 = "yuanjian/" & fid & ".png";


</script>

html代码:
<div class=mt1>
<UL>
<LI class=sj1 onclick="tabit(octab1,octab2,mtbd,ytdt)"><IMG id="mtbd" src="yuanjian/mtbd-g.png" /></LI>

<LI class=sj2 onclick="tabit(octab2,octab1,ytdt,mtbd)"><IMG id="ytdt" src="yuanjian/ytdt.png" /></LI>
</UL>
</div>

点击更换图片的地址,前面两个值是其他两个div的显示隐藏,这个不用管已经实现了,就是IMG怎么也不能替换src,求大神指点指点!谢谢
目前状况就提示“SCRIPT5007: 无法获取属性“src”的值: 对象为 null 或未定义”
这是什么状况啊?

通过找到img这个元素,然后再找到这个元素里的src属性,就可以查看,更改这个属性了


1)原生js

元素.setAttribute() //增加,更改属性,有两个参数,第一个参数是属性名,第二个是值.

元素.getAttribute() //传入属性名,获得该属性对应的值

2)Jquery(需要导包)

元素.attr(); //可传两个参数,传一个为获取该属性的值,传两个位增加 或 更改这个属性.


举个例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<img src="6.jpg">
<script src="jquery-2.1.1.min.js"></script>
<script>
    //原生js
    document.getElementsByTagName('img')[0].setAttribute('name','myimg');//没'name'属性,添加'name'属性,值为'myimg';
    document.getElementsByTagName('img')[0].setAttribute('src','7.jpg');//以有'src'属性,更改值为'7.jpg',达到换图片的目的;
    document.getElementsByTagName('img')[0].getAttribute('src');//返回'src'的值,'7.jpg';

    //Jquery
    $('img').attr('src','6.jpg');//把src属性更改为'6.jpg';
    $('img').attr('src');//获得src属性为'6.jpg';


</script>
</body>
</html>

参考技术A

你好

1、我写了一段示例代码,试过了可以用,你可以参考一下用法:

<img id="pic" src="" />
<script>
  document.getElementById('pic').src = "XXXXXXX";
</script>

2、你的代码中还有个错误,你函数中的字符串连接用的是 & 运算符,这是错误的,& 这个运算符表示的是“按位与”操作。在JS中,应当使用 + 运算符来连接字符串。例如:

<script>
  sr1 = "yuanjian/" & did & "-g.png";  //错误
  sr1 = "yuanjian/" + did + "-g.png";  //正确
</script>

 综合以上两点原因,希望能帮助你修正错误。如以上代码不能解决你的问题,欢迎追问。

追问

如果像我那样用onclick事件呢?把值传进去,该怎么写?
按照你写的,我已经改成+号了,直接写ID也确实可以改变这个id的src,但是用传值就提示 无法获取属性“src”的值: 对象为 null 或未定义

追答

你好,从你的tabit(id,cid,did,fid)函数来分析,后两个参数did和fid的类型应该是字符串,所以在传参时应当用半角引号括起来作为字符串直接量传入,如果没加引号则视为一个变量。因此,按照你的代码的意图,你应该是想把两个的id作为字符串传入tabit()吧?那么正确的做法是tabit(xxxx, xxxx, 'ytdt', 'mtbd')

本回答被提问者和网友采纳
参考技术B obj.setAttribute("src", "img/gougou.png");
var obj =document.getElementById("obj");
<img src="img/quan.png" id="obj">

以上是关于JS怎么更换img中src路径的主要内容,如果未能解决你的问题,请参考以下文章

js获取a标签下img的图片路径

怎么在html的<img src="">中调用js的函数或者js变量来指定图片路径?

js 怎么截取img路径里的图片名

如何用js怎么获取到图片的相对路径

<table><imgsrc=如何理解

javascript怎么动态更改img标签的src属性?