Comment puis-je obtenir un div et tous ses enfants avec leurs computedStyles respectifs ?

Question

Je voudrais saisir l'élément HTML et tous ses computedStyles.

J'ai réussi à le faire fonctionner lorsque l'élément HTML n'a pas d'enfants, mais si l'élément HTML a plusieurs enfants, comment puis-je récupérer tous les computedStyles de chaque enfant ?

Voici ce que j'ai pour l'instant :

• L'utilisateur clique sur un élément HTML, je saisis l'élément HTML en utilisant event.target.cloneNode(true).
• J'attribue ensuite un Id à l'élément cloné
• J'attrape le computedStyle

• Puis j'ajoute le style à mon élément cloné

  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

  }

Donc en gros, à ce stade, je me retrouve avec quelque chose comme :

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

Mais mon problème se pose lorsque l'élément HTML que je veux extraire a de nombreux enfants :

<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>

Alors comment puis-je extraire l'élément HTML complet avec ses enfants et leurs styles ?

Answer 1

J'ai donc été curieux d'en savoir plus et j'ai créé un exemple rapide pour parcourir un élément. Il devrait également fonctionner sans aucun enfant, car la boucle ne s'exécutera tout simplement pas.

// 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>

Si vous le souhaitez, vous pouvez vous en emparer et l'adapter à vos besoins. Par exemple, créer une fonction et l'exécuter au clic.