html js remove图片,JS操作图片(增,删,改) 例子
时间: 2024-01-05 08:04:27 浏览: 25
好的,我来回答你的问题。
首先,要想在 HTML 中删除图片,可以使用以下代码:
```html
<img src="example.jpg" id="myImage">
<button onclick="deleteImage()">删除图片</button>
<script>
function deleteImage() {
var img = document.getElementById("myImage");
img.parentNode.removeChild(img);
}
</script>
```
这个例子中,我们在 HTML 中定义了一个图片,并且给它一个 ID 为“myImage”。然后,在按钮被点击时,我们调用了一个 JavaScript 函数 deleteImage()。这个函数首先获取到了图片的元素,然后通过 parentNode.removeChild() 方法从 DOM 中删除了这个元素。
接下来,如果你想在 JavaScript 中操作图片,可以使用以下代码:
```html
<img src="example.jpg" id="myImage">
<button onclick="changeImage()">更换图片</button>
<script>
function changeImage() {
var img = document.getElementById("myImage");
img.src = "newimage.jpg";
img.alt = "New Image";
}
</script>
```
在这个例子中,我们同样定义了一个图片,并且给它一个 ID 为“myImage”。然后,在按钮被点击时,我们调用了一个 JavaScript 函数 changeImage()。这个函数首先获取到了图片的元素,然后通过设置 src 属性和 alt 属性来更换了这个图片的图片和替代文本。
最后,如果你想在 JavaScript 中增加一张图片,可以使用以下代码:
```html
<div id="imageContainer"></div>
<button onclick="addImage()">增加图片</button>
<script>
function addImage() {
var img = document.createElement("img");
img.src = "newimage.jpg";
img.alt = "New Image";
document.getElementById("imageContainer").appendChild(img);
}
</script>
```
在这个例子中,我们首先定义了一个空的 div 元素,并且给它一个 ID 为“imageContainer”。然后,在按钮被点击时,我们调用了一个 JavaScript 函数 addImage()。这个函数首先创建了一个新的图片元素,并且设置了它的 src 属性和 alt 属性。然后,我们通过调用 appendChild() 方法将这个图片元素添加到了 div 元素中,这样就成功地增加了一张图片。
相关推荐
![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)