Hey there! Let’s break down why your script works for a single div but falls apart with nested structures—this is a super common pitfall when dealing with DOM traversal and style handling. Here are the most likely culprits and fixes:

1. Your Script Isn’t Handling Nested Elements Recursively #

Single divs don’t require traversing child nodes, but nested structures need a recursive approach to process every element in the hierarchy. If your original code only targets the top-level element, all its children get ignored.

Fix: Add Recursive Logic #

Update your function to process the current element, then loop through its child elements and call the same function on each one:

function convertCSStoJS(element) {
  // Step 1: Process the current element's styles
  const computedStyle = getComputedStyle(element);
  const elementStyles = {};
  
  // Extract all computed styles into a JS object
  for (const prop of computedStyle) {
    elementStyles[prop] = computedStyle[prop];
  }
  
  // Example output: log styles for the element
  console.log(`Processed ${element.tagName.toLowerCase()}${element.id ? `#${element.id}` : ''}${element.className ? `.${element.className.replace(/\s+/g, '.')}` : ''}:`, elementStyles);

  // Step 2: Recursively process child elements
  Array.from(element.children).forEach(child => {
    convertCSStoJS(child);
  });
}

// Call the function on your top-level nested container
convertCSStoJS(document.querySelector('.nested-container'));

2. You’re Only Fetching Inline Styles (Not Computed Styles) #

If your script uses element.style to grab styles, it’ll only pick up inline styles—nested elements often inherit styles from parent classes or external CSS files, which element.style won’t capture.

Fix: Use getComputedStyle() #

This method returns the final computed style applied to an element, including inherited and external styles:

// ❌ Bad: Only gets inline styles
const inlineStyles = element.style;

// ✅ Good: Gets all applied styles
const computedStyles = getComputedStyle(element);

3. Your DOM Traversal Includes Non-Element Nodes #

If you’re using element.childNodes instead of element.children, you might be trying to process text nodes (like line breaks or spaces between divs), which don’t have style properties and will throw errors.

Fix: Target Only Element Nodes #

Use element.children to get only HTML elements, or filter childNodes to exclude non-element nodes:

// Option 1: Use children (only element nodes)
Array.from(element.children).forEach(child => convertCSStoJS(child));

// Option 2: Filter childNodes if you need more control
Array.from(element.childNodes)
  .filter(node => node.nodeType === Node.ELEMENT_NODE)
  .forEach(child => convertCSStoJS(child));

4. You’re Re-Processing Elements Accidentally #

If your script uses a broad selector like document.querySelectorAll('div'), it might process parent and child elements multiple times, leading to duplicate or conflicting data.

Fix: Mark Processed Elements #

Add a data attribute to elements you’ve already processed to skip them in subsequent runs:

function convertCSStoJS(element) {
  // Skip if already processed
  if (element.dataset.processed) return;
  element.dataset.processed = 'true';

  // Rest of your style processing logic...
}

Start by checking if your script includes recursive handling for child elements—that’s the most common fix for nested structure failures. If that doesn’t resolve it, verify you’re using getComputedStyle() and targeting only valid element nodes.

内容的提问来源于stack exchange，提问作者Wesley Howard