JavaScript 如何获取 td 的样式

在网页开发中，经常会遇到需要获取表格单元格（td）样式的情况，JavaScript 为我们提供了多种有效的方法来实现这一需求。

可以使用 element.style 属性来获取内联样式。当 td 元素有直接写在标签内的样式时，这种方法十分有效。例如：

<table>
  <tr>
    <td id="myTd" style="color: red; font-size: 16px;">示例文本</td>
  </tr>
</table>
<script>
  const myTd = document.getElementById('myTd');
  console.log(myTd.style.color);
  console.log(myTd.style.fontSize);
</script>

在上述代码中，通过 getElementById 获取到 td 元素，然后使用 element.style 就可以获取到内联样式中设置的颜色和字体大小。不过需要注意，这种方式只能获取到内联样式，对于写在 CSS 文件中的样式则无能为力。

如果想要获取计算后的样式，包括从 CSS 文件、样式表等继承而来的样式，可以使用 window.getComputedStyle 方法。代码如下：

<table>
  <tr>
    <td id="myTd2">示例文本2</td>
  </tr>
</table>
<style>
  #myTd2 {
    color: blue;
    font-size: 18px;
  }
</style>
<script>
  const myTd2 = document.getElementById('myTd2');
  const computedStyle = window.getComputedStyle(myTd2);
  console.log(computedStyle.color);
  console.log(computedStyle.fontSize);
</script>

getComputedStyle 方法返回一个包含所有计算后样式属性的对象，通过该对象可以获取到 td 元素最终显示的样式信息。

另外，对于一些较旧的浏览器，IE8 及以下版本不支持 getComputedStyle，可以使用 currentStyle 属性。示例代码：

<table>
  <tr>
    <td id="myTd3">示例文本3</td>
  </tr>
</table>
<style>
  #myTd3 {
    color: green;
    font-size: 20px;
  }
</style>
<script>
  const myTd3 = document.getElementById('myTd3');
  const style = myTd3.currentStyle || window.getComputedStyle(myTd3);
  console.log(style.color);
  console.log(style.fontSize);
</script>

这种方式通过 currentStyle 来兼容旧浏览器，确保在不同环境下都能获取到 td 的样式。

掌握这些获取 td 样式的方法，能让开发者更灵活地处理表格样式相关的需求，无论是进行样式的动态读取，还是根据样式进行相应的业务逻辑处理，都能轻松应对，提升网页开发的效率和质量。