element.src.match(“bulbon“)-----解释作用

原创已于 2024-07-16 19:54:04 修改 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #正则表达式 #html5

于 2021-07-12 10:57:47 首次发布

这段代码展示了一个使用JavaScript实现的图片切换功能。当用户点击图片时，图片的src属性会根据当前图片是否为开启状态（bulbon）进行切换，从而达到打开或关闭灯泡的效果。该功能通过匹配元素的src属性中是否存在特定字符串来判断图片状态。

原始代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

解释一下element.src.match(“bulbon”)的作用：

1.根据 element=document.getElementById(‘myimage’) 定位到id为myimage的标签，也就是img标签。

2.element.src.match(“bulbon”)，找到元素中属性为 src， 并匹配src的字符串属性，也就是在 src=“/images/pic_bulboff.gif” 中 匹配 “bulbon"字符串 ，只要在 src 中含有这个字符串就为真。类似于正则表达式。

栗子

element = <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
element.id.match("my")      #匹配成功
element.id.match("mimg")   #匹配失败，字符串需要连接起来
element.src.match("pic")    #匹配成功