JS实现鼠标覆盖时修改html代码
时间: 2023-10-26 22:30:14 浏览: 33
JS可以通过修改DOM元素的innerHTML或innerText属性来实现修改HTML代码的效果。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>修改HTML代码</title>
<style>
#change-div {
width: 200px;
height: 100px;
background-color: yellow;
font-size: 24px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="change-div" onmouseover="changeHTML()" onmouseout="restoreHTML()">鼠标移上来试试</div>
<script type="text/javascript">
function changeHTML() {
var div = document.getElementById("change-div");
div.innerHTML = "<p>你覆盖了我!</p><img src='image.jpg'>";
}
function restoreHTML() {
var div = document.getElementById("change-div");
div.innerHTML = "鼠标移上来试试";
}
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个黄色的`<div>`元素,并添加了鼠标覆盖事件监听器。当鼠标覆盖在元素上时,会触发`onmouseover`事件,我们在事件处理函数`changeHTML()`中将元素的innerHTML属性改为一个包含一个`<p>`标签和一个图片的字符串。当鼠标移开元素时,会触发`onmouseout`事件,我们在事件处理函数`restoreHTML()`中将元素的innerHTML属性改回原来的字符串。这样就实现了鼠标覆盖时修改HTML代码的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)