JavaScript克隆图片

最新推荐文章于 2022-11-18 16:38:26 发布

原创最新推荐文章于 2022-11-18 16:38:26 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

35 篇文章

订阅专栏

本文详细探讨了如何使用JavaScript实现图片的深度克隆，包括克隆图片对象、处理内存副本和避免引用问题。通过实例代码解析克隆过程，同时讲解了JavaScript在处理图像数据时的核心知识点。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #did {
                width: 400px;
                height: 200px;
                border: 1px solid blue;
            }
        </style>
    </head>

    <body>
        <div id="did">
        </div>
        <br/>
        <div id="mid">
            <img src="images/11.jpg" width="100" />
            <img src="images/22.jpg" width="100" />
            <img src="images/33.jpg" width="100" />
            <img src="images/44.jpg" width="100" />
        </div>

        <script type="text/javascript">
            var did = document.getElementById("did");
            var list = document.getElementById("mid").getElementsByTagName("img");
            for(var i = 0; i < list.length; i++) {
                //当双击图片的时候将图片添加到div中(将图片克隆下来，然后追加到div中的子节点中)
                list[i].ondblclick = function() {
                    did.appendChild(this.cloneNode())
                }
            }
        </script>
    </body>

</html>