JavaScript：改变 HTML 图像代码详解

最新推荐文章于 2021-06-03 04:53:46 发布

默磨

最新推荐文章于 2021-06-03 04:53:46 发布

阅读量1.2k

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/huaguniang666/article/details/106136776

版权

JavaScript：改变 HTML 图像详解

今天在菜鸟教程上学习JavaScript，学到JavaScript改变 HTML 图像时，我敲出来的代码加载不出图片，一直不明白怎么回事，在网上查了半天也没找到答案，最后自己改来改去的，结果改对了，下面就具体记一下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加油呦</title>
</head>
<body>
<script>
function changeImage() {  // function changeImage()是改变图片的函数
	element=document.getElementById('images')//获取我们定义的图片的id，id名字可以任意取，我这里让id=images
	if (element.src.match("rabbit"))//检索<img>标签里src中有没有字符串rabbit，这里的rabbit是我取的图片的名字
	{
		element.src="image/yellow duck.gif";//如果第一张显示rabbit图片，点击后就变成yellow duck图片，这里yellow duck.gif也是我的图片命名
	}
	else
	{
	element.src="image/rabbit.gif";//如果第一张显示yellow duck图片，点击后就显示rabbit.gif图片
	}
	}
</script>
<img id="images" onclick="changeImage()" src="image/yellow duck.gif" 		width="100" height="180">//这是图片，给该图片设置id，方便上面函数获取该图片，同时设置了点击事件，点击改变图片，src路径里放的是第一张显示的图片，还设置了宽高
</body>
</html>

我刚开始一直加载不出图片，原因是我的图片路径是错的，我在桌面上建了一个文件夹命名为text，里面建了一个image文件专门存放图片，我的代码也保存在text文件中，所以我的图片路径就是src=image/图片的名字
我在这里专门用了gif格式的图片，jpg和png格式的图片也可以这样用，都能加载出来

不过还有一个小问题就是gif格式的图片加载出来后点击就能互相转换没有错，但是jpg格式的图片加载出来后我点击一下换成另一种图片，再点击一下图片就加载不出来，具体不知道什么原因。

默磨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：改变 HTML 图像代码详解

JavaScript：改变 HTML 图像详解今天在菜鸟教程上学习JavaScript，学到JavaScript改变 HTML 图像时，我敲出来的代码加载不出图片，一直不明白怎么回事，在网上查了半天也没找到答案，最后自己改来改去的，结果改对了，下面就具体记一下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>加油呦</title></he
复制链接

扫一扫