The page will contain random divs, p, span, and other nested elements inside divs with a known class (summary). This data is being pasted from word and other programs, so might contain styling that I want to override. Since there are multiple levels and the name of the next div is random, !important doesn't work to try to override the inline styling. My thought is to use javascript to select all of the children, strip the styles, then apply my own. Is this possible? If so, can you give me an example of a function?

Here's a sample of the kind of code that's on the page:

  <div >
    <div style="box-sizing:border-box;font-family:&quot;Segoe UI&quot;, system-ui, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, sans-serif;font-size:14.6667px;orphans:2;widows:2;">
      <span style="font-size:10.5pt;">
        <span>
          <span>
            <span>
              <span>This web page was updated to add the <i>other random text </i>
                <span style="font-size:11pt;">
                  <span>
                    <span style="font-size:10.5pt;">
                      <span>
                        <span>
                          <span>
                            <span>more text here </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
                and some <b>other text here</b> section.
              </span>
            </span>
          </span>
          Here is the summary of
        </span>
      </span>
      <span>
        the property evaluation process. 
      </span>
    </div>
  </div>
</div>

Here's what I have tried:

function removeStyles(el) {
    el.removeAttribute('style');

    if(el.childNodes.length > 0) {
        for(let child in el.childNodes) {
            /* filter element nodes only */
            if(el.childNodes[child].nodeType == 1)
                removeStyles(el.childNodes[child]);
        }
    }
}

But this removes all of the styling, whereas I'm just wanting to remove it from within certain divs.

CodePudding user response：

First of all, let's assume that all of the tags that you're going to get will be inside a div called .container.

And we'll assume that the elements which will be found inside the .container are a mix of elements, ie: <p>, <span>, <div>, <ul>, <li>, etc..etc...

You can use the query.selectorAll method which returns a node list, use example as follows:

// 1. get all the elements inside .container and spread them in an array (NodeList --> Array)
const elements = [...document.querySelectorAll('.container *')]
// 2. apply the style x for all the elements
elements.forEach((el) => {
  el.style.color = "red"
})

<div >
  <div>
    nested div#1 layer 1
  </div>
  <div>
    nested div#2 layer 1
    <p>
      nested p layer 2
    </p>
  </div>
  <div>
    nested div#3 layer 1
    <div>
      nested div layer 2
      <div>
        nested div layer 3
        <div>
          nested div layer 4
          <span>nested span#1 layer 4</span>
          <span>nested span#2 layer 4</span>
          <span>nested span#3 layer 4</span>
        </div>
      </div>
    </div>
  </div>
</div>