如何清除指定表格wordTable中所有<td>的样式？

你可以通过以下几种原生JavaScript方法实现需求，直接清除表格里所有<td>的行内样式，恢复到初始状态：

方法1：直接遍历清除 #

这是最直接的实现方式，不需要扩展任何方法：

// 选中表格内所有td元素
const allTds = document.querySelectorAll('#wordTable td');
// 逐个清除行内样式
allTds.forEach(td => {
  // 清空style的所有行内样式规则
  td.style.cssText = '';
  // 或者也可以直接移除style属性
  // td.removeAttribute('style');
});

两种写法的区别：cssText = ''会保留<td>的style属性但清空内容，removeAttribute('style')则直接删除整个style属性，都能达到恢复初始样式的效果。

方法2：扩展方法实现类似你期望的链式调用 #

如果你想要像document.getElementById('wordTable').TD.removeStyle()这种简洁的调用方式，可以给HTMLElement扩展一个自定义方法：

// 给所有DOM元素添加清除子元素td样式的方法
HTMLElement.prototype.clearTdStyles = function() {
  const tds = this.querySelectorAll('td');
  tds.forEach(td => td.style.cssText = '');
};

// 调用时直接这样写
document.getElementById('wordTable').clearTdStyles();

这样就实现了类似你期望的简洁调用效果，后续需要清除其他表格的td样式时，也可以直接用这个方法。

注意：以上方法针对的是行内样式（也就是通过element.style.xxx设置的样式），如果你的样式是通过CSS类名添加的，需要额外移除对应的类（比如td.classList.remove('your-class-name')）。

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