1、新建一个HTML文件,命名为test.html,用于讲解JS如何改变HTML标签的属性。

2、在test.html页面定义一个img元素,用于显示图片,并为img元素定义一个值为myImage的id属性,方便下面使用JS获得图片对象。


3、在test.html页面使用input标签定义两个按钮,一个按钮名称为美女,另一个按钮名称为小孩。

4、分别给两个按钮绑定onclick事件,当点击按钮时,实现改变img元素的src图片路径属性。

5、分别给两个按钮的onclick事件绑定一个函数,美女按钮绑定meinu()函数,小孩按钮绑定xiaohai()函数,用于实现对img元素属性的操作。

6、在两个函数内,使用document.getElementById()方法获得img元素对象,然后对其src的属性进行修改,修改为新的图片路径。

7、在浏览器运行test.html,查看实现的效果:
可见,当点击按钮时,成功改变了img标签的src属性,实现了图片的改变。


