带样式的HTML节点深拷贝

引用自 摸鱼wiki

1. 思路

  1. 使用 cloneNode(true) 深拷贝节点及其子节点的结构
  2. 利用 computedStyle 获取当前节点的样式
  3. 遍历获取的样式结构体,赋值给复制节点
  4. 递归子节点,循环进行2-3步

2. 代码示例

function copyStyle(node: HTMLElement, targetNode: HTMLElement) {
  const computedStyle = getComputedStyle(node);
  Array.from(computedStyle).forEach((key) => targetNode.style.setProperty(
    key,
    computedStyle.getPropertyValue(key),
    computedStyle.getPropertyPriority(key),
  ));
  targetNode.style.pointerEvents = 'none';
  for (let i = 0; i < node.children.length; i += 1) {
    copyStyle(
      node.children[i] as HTMLElement,
      targetNode.children[i] as HTMLElement,
    );
  }
}

const shadowNode = currentNode.cloneNode(true) as HTMLElement;
copyNode(currentNode, shadowNode);

3. 实现效果

下方浅蓝色的即为复制的节点

你可能感兴趣的:(前端,html,前端)