如何给含内联background-color元素加类且跳过父同属性子元素

要实现这个需求，只需在原有逻辑基础上，增加对父元素内联background-color的检查：当元素自身有内联背景色，且父元素没有内联背景色时，才为该元素添加类名。

修改后的代码如下：

function modifyContent(content) {
  const doc = new DOMParser().parseFromString(content, "text/html");
  // 遍历所有带style属性的元素
  for (const element of doc.querySelectorAll('[style]')) {
    // 同时满足两个条件：自身有内联background-color，且父元素没有内联background-color
    if (element.style.backgroundColor && !element.parentElement?.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));

关键逻辑说明 #

• 用element.parentElement?.style.backgroundColor检查父元素是否存在内联背景色，可选链?.避免父元素为null时抛出错误。
• 只有同时满足「自身有内联背景色」和「父元素无内联背景色」两个条件，才会给元素添加类名，自动跳过父子都有内联背景色的子元素。

内容的提问来源于stack exchange，提问作者Karuppiah RK