JS如何改变HTML标签的属性

 时间:2026-02-14 02:49:39

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

JS如何改变HTML标签的属性

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

JS如何改变HTML标签的属性

JS如何改变HTML标签的属性

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

JS如何改变HTML标签的属性

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

JS如何改变HTML标签的属性

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

JS如何改变HTML标签的属性

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

JS如何改变HTML标签的属性

7、在浏览器运行test.html,查看实现的效果:

可见,当点击按钮时,成功改变了img标签的src属性,实现了图片的改变。

JS如何改变HTML标签的属性

JS如何改变HTML标签的属性

JS如何改变HTML标签的属性

  • mysql设置system_time_zone
  • jquery怎么添加一行
  • 利用ajax使一页面的内容插入到另一页面的div中
  • DataGrip添加txt文件步骤
  • Unity 2018 世界坐标Canvas如何不被遮挡
  • 热门搜索
    垂头丧气意思 中元节烧纸有什么讲究 人民币破7有什么影响 独坐敬亭山的意思 对牛弹琴是什么意思 杀青的意思 风疹什么症状 qq是什么意思 春节祝福 挂科是什么意思