如何清除指定class的div内子元素行内样式并应用自定义样式？

完全可行，只需精准定位目标容器（class为summary的div），递归清除其内部所有元素的行内样式后，再为容器应用自定义样式即可。

改进后的处理函数 #

// 清除指定容器内所有元素的行内样式并应用自定义样式
function processSummaryContainer() {
  // 定位到class为summary的目标容器
  const summaryContainer = document.querySelector('.summary');
  if (!summaryContainer) return; // 容器不存在则直接退出

  // 递归清除元素及其子元素的行内样式
  const removeInlineStyles = (el) => {
    el.removeAttribute('style');
    // 遍历所有子元素节点，仅处理HTML元素节点
    el.childNodes.forEach(child => {
      if (child.nodeType === 1) {
        removeInlineStyles(child);
      }
    });
  };

  // 执行清除操作
  removeInlineStyles(summaryContainer);

  // 方式1：直接设置行内样式（不推荐，维护性差）
  summaryContainer.style.fontFamily = "'Segoe UI', system-ui, sans-serif";
  summaryContainer.style.fontSize = "14px";
  summaryContainer.style.lineHeight = "1.5";
  summaryContainer.style.color = "#333";

  // 方式2：添加自定义类名（推荐，样式与逻辑分离）
  // summaryContainer.classList.add('custom-summary-style');
}

// 调用函数，处理目标容器
processSummaryContainer();

推荐的CSS自定义样式（搭配方式2使用） #

.custom-summary-style {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 1rem 0;
  /* 根据需求添加更多样式 */
}

原函数问题说明 #

你之前的函数逻辑本身没问题，但如果调用时未传入正确的目标容器（比如误传document.body），才会导致清除所有元素的样式。改进后的版本先通过document.querySelector('.summary')锁定目标容器，确保仅处理指定范围内的元素。

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