前端js替换html中的img，js替换div内容

JS实现点击一个按钮更换图片

1、准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换。如图，现在是静态的，鼠标放上去也不会产生切换反应，因为没有用JS。

2、正确的方法是让图片元素的id是img1，然后 document.getElementById(img1).src = ..\images/DTJPG这样进行赋值。document.getElementById(img1)这一步的作用就是选择图片元素。

3、补充说明：JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。

4、button value=最后的晚餐 onclick=图片显示区.innerHTML=这是最容易看懂的方式了，但代码有点臃肿，不方便维护，如果把按钮内容和图片名存入数组或对象，用函数切换比较方便维护。

相关问答

Q1: js正则替换图片属性

1、思路：使用javascript定时器函数setTimeout()以一定的毫秒间隔执行动作，在执行的动作中循环替换图片的src属性。

2、在index.html中的标签，输入js代码：$(img).attr(src， https：//)；。浏览器运行index.html页面，此时网页上的所有图片都被替换成了指定的图片。

3、方法：只需要每次刷新图片时，在img的src地址后面拼接一个随机数即可。例子：原有图片地址： 修改后图片地址： 原理：经过在浏览起端调试，发现当src的地址不变时，浏览器会从缓存里面取出来。

4、并将id在昵称dom元素的data-uid属性保存。用js字符串的replace函数实现，用正则表达式匹配需要替换的字符，正则表达式中，每对括号（）为一个分组，可以用正则的分组来捕获匹配到的内容，用占位符$$2代替。

5、无法去除。js正则表达式属于软件系统，因此其无法去除图片。js正则表达式是用于匹配字符串中字符组合的模式。

Q2: 在js文件中写代码使得html点击图片变成另一幅图片?

准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换。如图，现在是静态的，鼠标放上去也不会产生切换反应，因为没有用JS。

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的script标签中，填入js代码：setInterval($(img).attr(src， smallpng)， 1000)；。

需要用到js脚本的onmouseover和onmouseout等。这是非常简单的。但是如果你不了解js可以使用DreamWeaver中的一项功能：插入--图像对象--鼠标经过图像，在弹出的对话框中，选择好“原始图像”和“鼠标经过图像”就行了。

前端js替换html中的img的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js替换div内容、前端js替换html中的img的信息别忘了在本站进行查找喔。