JavaScript利用节点实现按钮复制图片并显示
时间: 2024-01-28 20:04:36 浏览: 33
你可以使用以下JavaScript代码来实现按钮复制图片并将复制的图片显示在页面上:
```javascript
// 获取图片节点
var image = document.getElementById("myImage");
// 创建复制按钮
var copyBtn = document.createElement("button");
copyBtn.innerHTML = "复制图片";
// 创建显示区域
var displayArea = document.createElement("div");
// 添加按钮和显示区域到页面
document.body.appendChild(copyBtn);
document.body.appendChild(displayArea);
// 复制图片到剪贴板并显示
copyBtn.addEventListener("click", function() {
// 创建临时元素
var temp = document.createElement("input");
temp.setAttribute("value", image.src);
document.body.appendChild(temp);
// 选中临时元素
temp.select();
// 复制到剪贴板
document.execCommand("copy");
// 移除临时元素
document.body.removeChild(temp);
// 创建新的图片元素
var copiedImage = document.createElement("img");
copiedImage.src = image.src;
// 添加新的图片元素到显示区域
displayArea.appendChild(copiedImage);
});
```
这段代码将创建一个按钮和一个显示区域,当点击按钮时,它将复制图片地址到剪贴板并将复制的图片显示在页面上。请替换代码中的`"myImage"`为你自己的图片的id。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)