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如何不被遮挡
  • 热门搜索
    斜刘海怎么剪 tcl冰箱质量怎么样 苹果手机怎么升级 性冷淡怎么造成的 朝阳轮胎怎么样 苹果apple id怎么注册 早孕试纸怎么看 怎么做生意 复习计划怎么写 足跟痛是怎么回事