javascript - 我怎样才能得到一个 div 及其所有子项及其各自的 computedStyles？

Question

我想获取 HTML 元素及其所有计算样式。

当 HTML 元素没有子元素时我设法让它工作，但是如果 HTML 元素有很多子元素怎么办，我如何获取每个子元素的所有 computedStyles

这是我目前所拥有的:

• 用户点击一个 html 元素，我使用 event.target.cloneNode(true) 抓取 HTML 元素
• 然后我为克隆的元素设置一个 Id
• 我获取了 computedStyle
• 然后我将样式添加到我克隆的元素

  private onClickHtmlCssGrabber = (event) => {
      // clone the html element
      let clickedHtmlElement = event.target.cloneNode(true)

      // set an id to the cloned element
      clickedHtmlElement.setAttribute('id', 'clonedElement')

      // get the computed style of the element
      let clikedHtmlElementStyle =  getComputedStyle(event.target).cssText

      // set the style on my newly cloned element
      clickedHtmlElement.style.cssText = clikedHtmlElementStyle
  }

所以基本上在这一点上我最终得到了类似的东西:

<div id="clonedElement" style="... all the coputedStyle">Example text</div>

但是当我要提取的 HTML 元素有很多子元素时，我的问题就出现了:

<div class="style1">
  <div class="style-child-1">
    <div class="style-child-2">
      example text child 2
    <div>
    <div class="style-child-3">
      example text child 3
    </div>
  <div>
</div>

那么如何提取整个 HTML 元素及其子元素及其样式？

Answer 1

所以我自己对此很好奇，并创建了一个快速示例来遍历一个元素。也应该在没有任何 child 的情况下工作，因为循环根本不会运行。

// container where we want to put the clone
const targetContainer = document.querySelector('.target');

// your element that you want to clone
const root = document.querySelector('.style1');
const rootWalker = document.createTreeWalker(
    root,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }
);

// now clone the element and also creat a walker for it
const rootClone = root.cloneNode(true);
const cloneWalker = document.createTreeWalker(
    rootClone,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; }}
);

// clone styles for the root element itself
rootClone.style.cssText = getComputedStyle(root).cssText
rootClone.className = '' // simply clearing it to see if styles are copied

// get the first child node, if there is no child, .nextNode() will return null
let nextRootNode = rootWalker.nextNode();
let nextCloneNode = cloneWalker.nextNode();

// now if we have a child node, the loop is running
while (nextRootNode !== null) {
  // get styles from original to clone
    nextCloneNode.style.cssText = getComputedStyle(nextRootNode).cssText;
  nextCloneNode.className = '' // again removing classes for demonstration
  
  // get next node, again if there are no more, null will be returned and loop will stop
  nextRootNode = rootWalker.nextNode();
  nextCloneNode = cloneWalker.nextNode();
}

// simply append the cloned node to your desired target
targetContainer.append(rootClone);

.style1 {
  background: yellow;
  padding: 10px;
  margin: 5px 0;
}

.style-child-1 {
  background: green;
  padding: 10px;
}

.style-child-2 {
  color: blue;
}

.style-child-3 {
  color: orange;
  text-transform: uppercase;
}

<div class="style1">
  <div class="style-child-1">
    <div class="style-child-2">
      example text child 2
    </div>
    <div class="style-child-3">
      example text child 3
    </div>
   </div>
</div>

<div class="target">

</div>

如果您愿意，可以捕获它并根据您的需要进行调整。例如。创建一个函数并在点击时运行它。