用于格式化 <td> 元素的 Javascript答案

【问题标题】：Javascript to format a <td> element用于格式化 <td> 元素的 Javascript
【发布时间】：2017-05-02 09:30:04
【问题描述】：

我正在尝试使用 JavaScript 格式化 td 元素的内容（文本）。但是，该元素没有 ID 属性（使用 getElementbyID）并且具有非唯一的 Class 属性（使用 getElementbyClass）。

我无法控制 html 部分，无法更改类名称或包含 ID 属性。所有不变的是<td> 中的文本。

知道如何编写一个可以格式化的脚本（例如，使文本变粗吗？）？

请注意，我不能使用 JQuery。

<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="90%" class="ms-formlabel" valign="top">
        General
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

试试table.ms-formtable > tbody > tr > td.ms-formlabel?
对不起，这在代码中没有说清楚，在那个 tbody>tr> 下有不止一个 td.ms-formlabel。
那么，您需要通过其文本内容来识别相关元素吗？你看过：stackoverflow.com/questions/3813294/…？
层次结构是变化还是固定？
@j08691 没有固定层次结构。

标签： javascript html css styles

【解决方案1】：

您可以选择第一个元素并使用.style更改其样式

var elem = document.querySelectorAll('td.ms-formlabel')[0];
elem.style.fontWeight = "900";

<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">	
        <tbody><tr>
        <td width="90%" class="ms-formlabel" valign="top">
        General
        </td>
        </tr>
        </tbody></table>

【讨论】：

只有当具有给定类的元素是第一个和具有该类名的元素时才有效；因为问题清楚地表明该元素具有不一定能保证的非唯一类名。诚然，这个问题将从不太简化的minimal reproducible example 中受益匪浅。