|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-12-26 23:55 编辑
JavaScript的cloneNode能克隆一个节点,以及深克隆该节点——就是节点及其所有子节点。其实,我们也可以有其他的替代方法。我的思路非常简单:
(一)制作一个与被克隆元素 A 一模一样的元素 B;
(二)将 A 的 innerHTML 赋予 B;
(三)如果 A 有交互行为,需要做额外处理,令 B 也拥有相同功能。
这个方法,和 cloneNode 效果大体一致,innerHTML 也不能传递 JS交互行为,但它绝对兼容所有浏览器。
我在楼下试一下如下代码:
- <style>
- #mydiv, #cloneBox {
- margin: 20px auto;
- width: 300px;
- height: 300px;
- border: 1px solid gray;
- cursor: pointer;
- position: relative;
- }
- .leaf {
- position: absolute;
- left: 50px;
- top: 50px;
- width: 150px;
- height: 150px;
- border-radius: 50% 0%;
- background: green;
- }
- </style>
- <div id="mydiv" title="点我改变颜色">
- <div class="leaf"></div>
- </div>
- <div id="cloneBox" title="点我改变颜色"></div>
- <script>
- let bgColors = ['green','lightgreen'];
- let sColor = true;
- mydiv.onclick = cloneBox.onclick = () => {
- let leaves = document.querySelectorAll('.leaf');
- leaves.forEach(elm => {
- elm.style.background = bgColors[sColor * 1];
- });
- sColor = !sColor;
- };
- cloneBox.innerHTML = mydiv.innerHTML;
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
幸运草
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|