通过找到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>
<!--这个是我刚刚做的，可以哦--><html>
<head>
<title>TestImgHtml</title>
<script>
function changeImg(url)
{
var bigimg = document.getElementById("myimg")
bigimg.src=url
}
function changeBack()
{
var bigimg = document.getElementById("myimg")
bigimg.src=""
}
</script>
</head>
<body>
<div><img id="myimg" src="" alter="此处为大图片" width="500" height="500"></div>
<div>
<img src="1.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
<img src="2.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()">
</div>
</body>
</html>
用setAtrribute()方法
举个例子
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="1.jpg" alt="">
<script>
//获取到图片标签标签
var img = document.getElementsByTagName("img")[0]
//设置图片路径
img.setAttribute("src","2.jpg")
</script>
</body>
</html>
