html 如果父元素和子元素都包含内联背景色，则跳过向子元素添加类名

prdp8dxp 于 2022-12-09 发布在其他

关注(0)|答案(3)|浏览(128)

bounty将在5天后过期。回答此问题可获得+50的声望奖励。Karuppiah RK正在寻找此问题的更详细的答案。

我正在尝试将随机类名称添加到包含内联背景色的元素。我想再添加一个条件。如果父元素和子元素都有内联背景色，则无需为子元素添加类名称。需要跳过该特定子元素。如果父元素和子元素都包含背景色，如何跳过为子元素添加类名称？

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");
  // select only elements with a style attribute:
  for (const element of doc.querySelectorAll('[style]')) {
    if (element.style.backgroundColor) {
      element.classList.add('someRandomClassName');
    }
  }
  return doc.body.innerHTML;
}

const input = `<div>
   <div style="font-size :  16px; font-family :  Arial,  Helvetica,  sans-serif; ">
      <div>
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">Description </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">ncern:&nbsp;</span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">Description </span></span></span></span>
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span>
         <br>
      </div>
   </div>
   <br>
</div>`;
console.log(modifyContent(input));

Html

来源：https://stackoverflow.com/questions/74687359/skip-adding-class-name-to-child-elements-if-both-parent-and-child-element-cont

3条答案

按热度按时间

gblwokeq1#

你必须这样做：

hasChildrenBackgroundColor = false;
hasParentBackgroundColor = false;

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");
  // select only elements with a style attribute:
  for (const element of doc.querySelectorAll('[style]')) {
    checkChildrenBackgroundColor(element.children);
    
    if (hasParentBackgroundColor && hasChildrenBackgroundColor) {
        hasParentBackgroundColor = false;
        hasChildrenBackgroundColor = false;
      continue;
    }
    
    hasParentBackgroundColor = false;
    hasChildrenBackgroundColor = false;

    if (element.style.backgroundColor) {
      element.classList.add('someRandomClassName');
    }
  }
  return doc.body.innerHTML;
}

function checkChildrenBackgroundColor (elements) {
  for (let element of elements) {
        checkParentBackgroundColor(element.parentNode.parentNode);
  
    if (element.style.backgroundColor) {
      hasChildrenBackgroundColor = true;
      return;
    }
  
    if (element.children && element.children.length) {
      checkChildrenBackgroundColor(element.children);
    }
  }
}

function checkParentBackgroundColor (element) {
  if (element && element.style && element.style.backgroundColor) {
        hasParentBackgroundColor = true;
    return;
  }

    if (element.parentNode) {
    checkParentBackgroundColor(element.parentNode);
  }
}

在parentElement中检查样式backgroundColor是否存在。然后在children集合中检查某些元素是否具有backgroundColor类。

赞(0）回复(0）举报 2022-12-09

qltillow2#

如果你想跳过向一个元素添加随机类，如果 any 它的子元素有内联背景色，你可以使用递归来循环遍历子元素：

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");

  for (const element of doc.querySelectorAll("a[style]")) {
    if (element.style.backgroundColor) { // Parent has inline background color
      if (!checkChildren(element)) { // No children have it
        element.classList.add("someRandomClassName");
      }
    }
  }
}

function checkChildren(element) { // Check children recursively
  for (const child in element.children) {
    if (typeof child.style != "undefined") { // Child has property "style"
      if (child.style.backgroundColor) return true; // Child has inline background color
    }

    for (const nestedChild in child.children) { // Checking nested children
      if (checkChildren(nestedChild)) return true;
    }
  }

  return false;
}

赞(0）回复(0）举报 2022-12-09

q8l4jmvw3#

I am not 100% sure of what you are asking but here is my take on it. Please note there is only 1 <span> element in your example that meet your condition, if I understand it correctly (condition being: self and parent have background-color style attribute set).
You can verify that with this selector: doc.querySelectorAll("[style*=\"background-color\"] > [style*=\"background-color\"]") .
Your code becomes:

var searchItem = function(items, item) {
    for (var i = 0; i < items.length; i++) {
        if (items[i] === item)
            return true;
    }
    return false;
}

var modifyContent = function(content) {
    var doc = new DOMParser().parseFromString(content, "text/html");
    
    var items = doc.querySelectorAll("[style*=\"background-color\"]");
    var skip = doc.querySelectorAll("[style*=\"background-color\"] > [style*=\"background-color\"]");
    
    for (var i = 0; i < items.length; i++) {
        if (searchItem(skip, items[i])) {//skip
            items[i].classList.add("skipped");
            console.log("skipped:");
            console.log(items[i]);
        }
        else {//add
            items[i].classList.add("someRandomClassName");
        }
    }
    
     return doc.body.innerHTML;
}

const input = `<div>
   <div style="font-size :  16px; font-family :  Arial,  Helvetica,  sans-serif; ">
      <div>
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">Description </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         <span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">ncern:&nbsp;</span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size">Description </span></span></span></span>
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(254, 255, 102); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span><span style="color :  rgb(0, 0, 0); font-family :  Arial,  Helvetica,  sans-serif; font-size :  13px; font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; white-space :  normal; widows :  2; word-spacing :  0px; background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">ncern:&nbsp;</span></span></span></span><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(204, 204, 204); ">Description </span></span></span></span></span><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span><br>
      </div>
      <div><br></div>
      <div><span style="color :  rgb(0, 0, 0); font-style :  normal; font-weight :  400; letter-spacing :  normal; orphans :  2; text-indent :  0px; text-transform :  none; widows :  2; word-spacing :  0px; font-size :  14px; font-family :  LatoRegular,  sans-serif; white-space :  pre-wrap; "><span style="background-color :  rgb(255, 255, 255); " class="x_965909101highlight"><span style="font-family :  tahoma,  arial,  helvetica,  sans-serif,  sans-serif; " class="x_965909101font"><span style="font-size :  13px; " class="x_965909101size"><span class="x_-809421787highlight" style="background-color :  rgb(255, 153, 204); ">
         </span></span></span></span></span>
         <br>
      </div>
   </div>
   <br>
</div>`;

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .someRandomClassName {
                border:1px solid red;
            }
            .skipped {
                border:2px solid green;
            }
        </style>
    </head>
    <body>
        <div id="result"></div>
        <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function(e){
      
        var result = modifyContent(input);
        /*
          the skipped element(s) are added a ".skipped" CSS class
          for quick visualization
        */
        document.querySelector("#result").innerHTML = result;
      });
        </script>
    </body>
</html>

The span(s) with a green border is/are the skipped element(s).

赞(0）回复(0）举报 2022-12-09

我来回答

html 如果父元素和子元素都包含内联背景色，则跳过向子元素添加类名

3条答案

相关问题

热门标签

最新问答